<template>
  <div class="app-container">
    <!-- 头部 -->
    <div class="dataScreen-head">
      <div class="dataScreen-title">
        <p id="robotxj"></p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="dataScreen-contner">
      <!-- 左边抽屉按钮 -->
      <el-button @click="drawer = true" round type="primary" size="mini" style="
          color: #0b73c5;
          z-index: 1000;
          position: fixed;
          left: 2.5%;
          top: 44%;
          border: none;
          background: none !important;
        ">
        <i class="el-icon-d-arrow-right"></i>
      </el-button>
      <!-- 右边抽屉按钮 -->
      <el-button @click="dialog = true" round type="primary" size="mini" style="
          color: #0b73c5;
          z-index: 1000;
          position: fixed;
          right: -1%;
          top: 45%;
          border: none;
          background: none !important;
        ">
        <i class="el-icon-d-arrow-left"></i>
      </el-button>
      <!-- 左边 -->
      <div class="dataScreen-left">
        <!-- 机器人列表 -->
        <div class="dataScreen-robot">
          <!-- 标题 -->
          <div class="dataScreen-rotitle">
            <p>机器人列表</p>
          </div>
          <!-- 列表 -->
          <div class="dataScreen-rolist">
            <!-- 表头 -->
            <el-table align="le" @row-click="selectrobot" :data="robots" height="100%"
                      :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']" :header-cell-style="{
                background: '#132743',
                opacity: '0.4',
                color: '#FFFFFF',
                fontSize: '12px',
                'text-align': 'left',
              }" :row-style="{
                height: '36px',
                background: 'tranaparent',
                fontSize: '12px',
              }" :cell-style="{ padding: '0px' }" style="
                font-size: 12px;
                font-weight: bold;
                color: #a1c3dc;
                border-bottom: none;
              ">
              <el-table-column label="编号">
                <template slot-scope="scope">
                  <div class="list-img" style="fontSize:'12px';display:flex;align-items: center;">
                    <img src="../../components/images/001.png" width="40px" height="30px" alt="" />
                    <div
                      style="background-image:-webkit-linear-gradient(bottom,#63a5dc,#09d1e3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size: 12px; font-weight: bold;margin-left:-30px ">
                      00{{ scope.$index + 1 }}
                    </div>
                    <P style="font-size:12px; font-weight: bold; display: inline-block;margin-left:10px;">
                      {{ scope.row.robot_num }}
                    </P>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="robot_name" label="名称">
              </el-table-column>
              <el-table-column label="状态" width="50px" style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                ">
                <template slot-scope="scope">
                  <img src="../../components/images/run.png" width="20px" height="20px" alt=""
                       v-if="scope.row.robot_state == 1" />
                  <img src="../../components/images/wrong.png" width="20px" height="20px" alt="" v-else />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 电器参数 -->
        <div class="dataScreen-electrical">
          <!-- 标题 -->
          <div class="dataScreen-eltitle">
            <p>电气参数</p>
            <el-select v-model="selectedOption[0]" :placeholder="selectedOption[0]" @change="getOptionPLC">
              <el-option v-for="item in plcList" :key="item.robot_config_id + '_' + item.plc_num" :label="item.plc_name + ' ' + (item.plc_state == 1 ? '在线' : '离线')
                " :value="item.robot_config_id + '_' + item.plc_num"></el-option>
            </el-select>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-ellist" style="overflow: auto">
            <div class="item" v-hasPermi="['robot:jqrdw1:view']">
              <p style="color: #a1c3dc">机器人到位信号1</p>
              <p style="color: #9f702c" v-if="tsjjqrdwxh1 == '未到位'">
                {{ tsjjqrdwxh1 }}
              </p>
              <p style="color: #a2b5d7" v-else-if="tsjjqrdwxh1 == '无'">
                {{ tsjjqrdwxh1 }}
              </p>
              <p style="color: #2da14e" v-else>{{ tsjjqrdwxh1 }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:jqrdw2:view']">
              <p style="color: #a1c3dc">机器人到位信号2</p>
              <p style="color: #9f702c" v-if="tsjjqrdwxh2 == '未到位'">
                {{ tsjjqrdwxh2 }}
              </p>
              <p style="color: #a2b5d7" v-else-if="tsjjqrdwxh2 == '无'">
                {{ tsjjqrdwxh2 }}
              </p>
              <p style="color: #2da14e" v-else>{{ tsjjqrdwxh2 }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:tsjsdw:view']">
              <p style="color: #a1c3dc">提升机上到位</p>
              <p style="color: #9f702c" v-if="tsjssdw1 == '未到位'">
                {{ tsjssdw1 }}
              </p>
              <p style="color: #a2b5d7" v-else-if="tsjssdw1 == '无'">
                {{ tsjssdw1 }}
              </p>
              <p style="color: #2da14e" v-else>{{ tsjssdw1 }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:tsjxdw:view']">
              <p style="color: #a1c3dc">提升机下到位</p>
              <p style="color: #9f702c" v-if="tsjxjdw2 == '未到位'">
                {{ tsjxjdw2 }}
              </p>
              <p style="color: #a2b5d7" v-else-if="tsjxjdw2 == '无'">
                {{ tsjxjdw2 }}
              </p>
              <p style="color: #2da14e" v-else>{{ tsjxjdw2 }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:ddmkdw:view']">
              <p style="color: #a1c3dc">电动门开到位</p>
              <p style="color: #9f702c" v-if="ddmkdw == '未到位'">
                {{ ddmkdw }}
              </p>
              <p style="color: #a2b5d7" v-else-if="ddmkdw == '无'">
                {{ ddmkdw }}
              </p>
              <p style="color: #2da14e" v-else>{{ ddmkdw }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:ddmgdw:view']">
              <p style="color: #a1c3dc">电动门关到位</p>
              <p style="color: #9f702c" v-if="ddmgdw == '未到位'">
                {{ ddmgdw }}
              </p>
              <p style="color: #a2b5d7" v-else-if="ddmgdw == '无'">
                {{ ddmgdw }}
              </p>
              <p style="color: #2da14e" v-else>{{ ddmgdw }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:cdzdw1:view']">
              <p style="color: #a1c3dc">充电桩机器人到位信号1</p>
              <p style="color: #a2b5d7">{{ cdzdwxh1 }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:cdzdw2:view']">
              <p style="color: #a1c3dc">充电桩机器人到位信号2</p>
              <p style="color: #a2b5d7">{{ cdzdwxh2 }}</p>
            </div>
          </div>
        </div>
        <!-- 设备运行参数 -->
        <div class="dataScreen-equipment">
          <!-- 标题 -->
          <div class="dataScreen-eqtitle">
            <p>设备运行参数</p>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-ellist" style="overflow: auto">
            <div class="item">
              <p style="color: #a1c3dc">电机转速(r/min)</p>
              <p style="color: #a2b5d7">{{ djzs }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">机器人方向</p>
              <p style="color: #9a4814" v-if="jqrfx == '后退'">{{ jqrfx }}</p>
              <p style="color: #a2b5d7" v-else-if="jqrfx == '无'">
                {{ jqrfx }}
              </p>
              <p style="color: #2da14e" v-else>{{ jqrfx }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">机器人模式</p>
              <p style="color: #a2b5d7">{{ jqrms }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">电池状态</p>
              <p style="color: #96e81a" v-if="dczt == '充电'">{{ dczt }}</p>
              <p style="color: #a2b5d7" v-else-if="dczt == '无'">{{ dczt }}</p>
              <p style="color: #9f702c" v-else>{{ dczt }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">电机温度(℃)</p>
              <p style="color: #ee1c22" v-if="djwd > 90">{{ djwd }}</p>
              <p style="color: #9eee25" v-else-if="djwd > 60">{{ djwd }}</p>
              <p style="color: #46cc51" v-else-if="djwd > 40">{{ djwd }}</p>
              <p style="color: #29ab33" v-else-if="djwd > 30">{{ djwd }}</p>
              <p style="color: #30a96a" v-else-if="djwd > 20">{{ djwd }}</p>
              <p style="color: #a2b5d7" v-else-if="djwd == '无'">{{ djwd }}</p>
              <p style="color: #0b853c" v-else>{{ djwd }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">1#电机</p>
              <p style="color: #a2b5d7">{{ dj1 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">2#电机</p>
              <p style="color: #a2b5d7">{{ dj2 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">1#摄像头</p>
              <p style="color: #a2b5d7">{{ sxt1 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">2#摄像头</p>
              <p style="color: #a2b5d7">{{ sxt2 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">轨道长度</p>
              <p style="color: #a2b5d7">{{ gdzcd }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">收钩</p>
              <p style="color: #a2b5d7">{{ sg }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">放钩</p>
              <p style="color: #a2b5d7">{{ fg }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="dataScreen-center">
        <!-- 告警数据 -->
        <div class="dataScreen-alarm">
          <div class="dataScreen-alaimg">
            <!-- 喇叭图标 -->
            <img id="spkid" src="../../components/images/spk.gif" alt="" height="18px" width="25px" />
          </div>
          <div class="dataScreen-alatext">
            <div id="box">
              <ul id="con1" ref="con1" :class="{ anim: animate == true }">
                <li v-for="alarm in alarms" :key="alarm.id">
                  <font style="color: #ffd200; font-size: 14px">{{ alarm.robot_name }}&nbsp;&nbsp;&nbsp;{{
                    alarm.alarminfo
                    }}&nbsp;&nbsp;&nbsp;&nbsp;
                    <font style="color: #64ccff; font-size: 14px">{{
                      alarm.alarmtime
                      }}</font>
                  </font>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 监控视频区 -->
        <div class="dataScreen-video">
          <!-- 摄像头图标 -->
          <div class="dataScreen-videoimg">
            <img src="../../components/images/robot.png" alt="" />
          </div>
          <!-- 监控画面 -->
          <!-- 大华摄像头 -->
          <div class="dataScreen-videoBox" v-show="this.camera_type == 0">
            <div class="dataScreen-videoIcon">
              <video v-show="videoShowQ" muted autoplay ref="videoElement" style="background-color:#000;width:100%;height:100%;" class="video-js" controls></video>
            </div>
            <div class="dataScreen-videoIcon" style="border-left: 0px">
              <video v-show="videoShowH" muted autoplay ref="videoElement1" style="background-color:#000;width:100%;height:100%;" class="video-js" controls></video>
            </div>
          </div>
          <!-- 吊舱摄像头 -->
          <div class="dataScreen-videoBox" v-show="this.camera_type == 2">
            <div class="dataScreen-videoIcon">
              <video v-show="videoShowQ" id="DCQvideo" class="video-js" style="width: 100%; height: 99%" controls
                     autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                     controlslist="nodownload"></video>
            </div>
            <div class="dataScreen-videoIcon" style="border-left: 0px">
              <video v-show="videoShowH" id="DCHvideo" class="video-js" style="width: 100%; height: 99%" controls
                     autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                     controlslist="nodownload"></video>
            </div>
          </div>
          <!-- 海康摄像头 -->
          <div class="dataScreen-videoBox" v-show="this.camera_type == 1">
            <div class="dataScreen-videoIcon">
              <video id="HKQvideo" class="video-js" style="width: 100%; height: 99%" controls autoplay autobuffer muted
                     preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
            </div>
            <div class="dataScreen-videoIcon" style=""></div>
          </div>
        </div>
        <!-- 轨道部分 -->
        <div class="dataScreen-track">
          <!-- 图标部分 -->
          <div class="dataScreen-trackTop">
            <div class="dataScreen-trackIcon1">
              <img src="../../components/images/contorll.png" alt="" />
              <p>巡检点</p>
            </div>
            <div class="dataScreen-trackIcon2">
              <img src="../../components/images/contorl.png" alt="" />
              <p>机器人</p>
            </div>
            <div class="dataScreen-trackIcon3">
              <div style="
                  width: 24px;
                  height: 8px;
                  background: linear-gradient(-85deg, #3f9fdc, #7af9fd);
                "></div>
              <p>
                位移 <font style="color: #5dcbff"> {{ sswy }}</font> m
              </p>
            </div>
            <div class="dataScreen-trackIcon4">
              <div style="
                  width: 24px;
                  height: 8px;
                  background: linear-gradient(-85deg, #365084, #7a80fd);
                "></div>
              <p>
                电压
                <font style="color: #138047" v-if="dcdy > 70">{{ dcdy }}</font>
                <font style="color: #0e8618" v-else-if="dcdy > 50">{{
                  dcdy
                  }}</font>
                <font style="color: #29ab33" v-else-if="dcdy > 40">{{
                  dcdy
                  }}</font>
                <font style="color: #46cc51" v-else-if="dcdy > 30">{{
                  dcdy
                  }}</font>
                <font style="color: #9eee25" v-else-if="dcdy > 20">{{
                  dcdy
                  }}</font>
                <font style="color: #a5f1a6" v-else-if="dcdy > 15">{{
                  dcdy
                  }}</font>
                <font style="color: #5dcbff" v-else-if="dcdy == '无'">{{
                  dcdy
                  }}</font>
                <font style="color: #e19532" v-else>{{ dcdy }}</font>
                v
              </p>
            </div>
            <div class="dataScreen-trackIcon5">
              <div style="
                  width: 24px;
                  height: 8px;
                  background: linear-gradient(-85deg, #268c76, #1d83a7);
                "></div>
              <p>
                电量
                <font style="color: #30a96a" v-if="dcdl > 80">{{ dcdl }}</font>
                <font style="color: #46cc51" v-else-if="dcdl > 70">{{
                  dcdl
                  }}</font>
                <font style="color: #9eee25" v-else-if="dcdl > 60">{{
                  dcdl
                  }}</font>
                <font style="color: #9eee25" v-else-if="dcdl > 50">{{
                  dcdl
                  }}</font>
                <font style="color: #a5f1a6" v-else-if="dcdl > 30">{{
                  dcdl
                  }}</font>
                <font style="color: #e19532" v-else-if="dcdl > 20">{{
                  dcdl
                  }}</font>
                <font style="color: #5dcbff" v-else-if="dcdl == '无'">{{
                  dcdl
                  }}</font>
                <font style="color: #de5c23" v-else>{{ dcdl }}</font>
                %
              </p>
            </div>
            <div class="dataScreen-trackIcon6">
              <div style="
                  width: 24px;
                  height: 8px;
                  background: linear-gradient(
                    -85deg,
                    rgb(65 142 226),
                    rgb(29 84 167)
                  );
                "></div>
              <p>
                运行灯
                <font style="color: #bb5d10" v-if="yxd == '关闭'">{{
                  yxd
                  }}</font>
                <font style="color: #5dcbff" v-else-if="yxd == '无'">{{
                  yxd
                  }}</font>
                <font style="color: #17a956" v-else>{{ yxd }}</font>
              </p>
            </div>
          </div>
          <!-- 轨道点 -->
          <div class="dataScreen-trackBtom1" v-show="typeof this.result == 'undefined' || this.result == null">
            暂无电子地图
          </div>
          <div class="dataScreen-trackBtom" ref="chinaMapChart"
               v-show="typeof this.result !== 'undefined' && this.result !== null"></div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="dataScreen-right">
        <!-- 图标 -->
        <div class="dataScreen-rightIcon">
          <!-- 机器人 -->
          <div class="dataScreen-rightIcon1">
            <img id="jqrimgid" src="../../components/images/jiqiren2.png" alt="" style="display: block" />
            <img id="jqrimgid1" src="../../components/images/jiqiren1.png" alt="" style="display: none" />
            <router-link :to="'/robot/robot/robotconfig'">
              <p class="pname">
                机器人&nbsp;&nbsp;<span class="p1">{{ robots.length }}</span>
              </p>
            </router-link>
          </div>
          <!-- PLC -->
          <div class="dataScreen-rightIcon1">
            <img id="plcimgid" src="../../components/images/plc2.png" alt="" style="display: block" />
            <img id="plcimgid1" src="../../components/images/plc1.png" alt="" style="display: none" />
            <router-link :to="'/robot/robot/plc'">
              <p class="pname">
                PLC &nbsp;&nbsp;<span class="p2">{{ plcList.length }}</span>
              </p>
            </router-link>
          </div>
          <!-- 告警 -->
          <div class="dataScreen-rightIcon1">
            <img id="bjimgid" src="../../components/images/gaojin2.png" alt="" style="display: block" />
            <img id="bjimgid1" src="../../components/images/gaojin1.png" alt="" style="display: none" />
            <router-link :to="'/robot/alarm/alarmData'">
              <p class="pname">
                告警&nbsp;&nbsp;<span class="p3">{{
                  alarms.length == 1 ? 0 : alarms.length
                }}</span>
              </p>
            </router-link>
          </div>
        </div>
        <!-- 巡检列表 -->
        <div class="dataScreen-inspection">
          <!-- 标题 -->
          <div class="dataScreen-intitle">
            <router-link :to="'/robot/xjgls/patroltaskhis'">
              <p>巡检列表</p>
            </router-link>
          </div>
          <!-- 列表 -->
          <div class="dataScreen-inlist">
            <!-- 表头 -->
            <el-table :data="patrols" ref="table" height="90%"
                      :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']" :header-cell-style="{
                background: '#132743',
                opacity: '0.4',
                color: '#FFFFFF',
                fontSize: '12px',
                'text-align': 'center',
              }" :row-style="{ height: '33px', fontSize: '12px' }"
                      :cell-style="{ margin: '2px', 'text-align': 'center' }" style="
                font-size: 12px;
                font-weight: bold;
                color: #a1c3dc;
                border-bottom: none;
              ">
              <el-table-column prop="position_num" label="巡检点" width="60px">
              </el-table-column>
              <el-table-column prop="creater_time_str" label="时间" width="90px">
              </el-table-column>
              <el-table-column prop="vals" label="结果" width="70px">
              </el-table-column>
              <el-table-column prop="resc" label="资源"> </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 环境参数 -->
        <div class="dataScreen-parameter">
          <!-- 标题 -->
          <div class="dataScreen-paratitle">
            <p>环境参数</p>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-paraBox">
            <div class="concentration1">
              <div id="hygrometer"></div>
              <p style="color: #a1c3dc; font-size: 12px">甲烷(%LEL)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer2"></div>
              <p style="color: #a1c3dc; font-size: 12px">氧气(%)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer3"></div>
              <p style="color: #a1c3dc; font-size: 12px">硫化氢(PPM)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer4"></div>
              <p style="color: #a1c3dc; font-size: 12px">现场温度(℃)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer5"></div>
              <p style="color: #a1c3dc; font-size: 12px">现场湿度(%LEL)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer6"></div>
              <p style="color: #a1c3dc; font-size: 12px">氨气(PPM)</p>
            </div>
          </div>
        </div>
        <!-- 环境参数检测 -->
        <div class="dataScreen-detection">
          <!-- 标题 -->
          <div class="dataScreen-deTitle">
            <p>环境参数检测</p>
          </div>
          <!-- 参数图表 -->
          <div class="echart" id="mychart"></div>
        </div>
      </div>
      <!-- 抽屉 -->
      <!-- 左边抽屉 -->
      <div class="left">
        <el-drawer :modal="false" :direction="direction" :visible.sync="drawer" :with-header="false" size="27%">
          <!-- plc面板 -->
          <div class="PLCpanel">
            <div class="PLCpanel-p1">
              <p>PLC面板</p>
            </div>
            <div class="PLCpanel-para">
              <p class="PLCpanel-parap1">显示参数</p>
              <p class="PLCpanel-parap2" style="width: 50px; height: 3px; background-color: #4691ff"></p>
              <el-select class="PLCpanel-parap3" v-model="selectedOption[0]" :placeholder="selectedOption[0]"
                         @change="getOptionPLC">
                <el-option v-for="item in plcList" :key="item.robot_config_id + '_' + item.plc_num" :label="item.plc_name +
                  ' ' +
                  (item.plc_state == 1 ? '在线' : '离线')
                  " :value="item.robot_config_id + '_' + item.plc_num"></el-option>
              </el-select>
            </div>
            <div class="PLCpane2">
              <div class="PLCpane2-left" style="margin-right: 6px">
                <p class="P1">提升机上到位</p>
                <p>{{ tsjssdw1 }}</p>
              </div>
              <div class="PLCpane2-left">
                <p class="P1">提升机下到位</p>
                <p>{{ tsjxjdw2 }}</p>
              </div>
            </div>
            <div class="PLCpane2">
              <div class="PLCpane2-left" style="margin-right: 6px">
                <p class="P1">机器人到位信号1</p>
                <p>{{ tsjjqrdwxh1 }}</p>
              </div>
              <div class="PLCpane2-left">
                <p class="P1">机器人到位信号2</p>
                <p>{{ tsjjqrdwxh2 }}</p>
              </div>
            </div>
            <div>
              <img src="../../components/images/line.png" alt="" />
            </div>
            <div class="PLCpane3">
              <div class="PLCpane3-left" style="margin-right: 6px">
                <p class="P1">电门开到位</p>
                <p>{{ ddmkdw }}</p>
              </div>
              <div class="PLCpane3-left">
                <p class="P1">电门关到位</p>
                <p>{{ ddmgdw }}</p>
              </div>
            </div>
          </div>
          <!-- 公共操作 -->
          <div class="operation">
            <div class="operation1">
              <p class="operation-p1">公共操作</p>
              <p class="operation-p2" style="width: 50px; height: 3px; background-color: #4691ff"></p>
            </div>
            <div v-hasPermi="['robot:bgcz:view']">
              <div class="operation2">
                <img src="../../components/images/biangui.png" alt="" style="width: 20px; height: 20px" />
                <p>变轨</p>
              </div>
              <div style="display: flex">
                <div class="operation3">
                  <el-button class="operation3-1" size="mini" @click="bzg()">变直轨</el-button>
                  <el-button class="operation3-2" size="mini" @click="bgtz()">停止</el-button>
                </div>
                <div class="operation4">
                  <el-button class="operation4-1" size="mini" @click="bwg()">变弯轨</el-button>
                </div>
              </div>
              <div>
                <img src="../../components/images/line.png" alt="" />
              </div>
            </div>

            <div v-hasPermi="['robot:ddmcz:view']">
              <div class="operation2">
                <img src="../../components/images/door.png" alt="" style="width: 20px; height: 20px" />
                <p>电动门</p>
              </div>
              <div style="display: flex">
                <div class="operation3">
                  <el-button class="operation3-1" size="mini" @click="ddmk()">电动门(开)</el-button>
                  <el-button class="operation3-2" size="mini" @click="ddmzt()">停止</el-button>
                </div>
                <div class="operation4">
                  <el-button class="operation4-1" size="mini" @click="ddmg()">电动门(关)</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
      <!-- 右边抽屉 -->
      <div class="right">
        <el-drawer :modal="false" :direction="directions" :visible.sync="dialog" :with-header="false" size="26%">
          <div class="right-top">
            <div class="right-topTitle">
              <p>机器人面板</p>
            </div>

            <div class="Speed-dial">
              <div id="gauges2" ref="gauges2" style="width: 30%; height: 100px; margin-top: 40px"></div>
              <div id="gauges" ref="gauges" style="width: 38%; height: 140px; margin-top: 4px"></div>
              <div id="gauges3" ref="gauges3" style="width: 30%; height: 100px; margin-top: 40px"></div>
            </div>

            <div class="right-mode">
              <div class="mode-box">
                <p>现场温度</p>
                <p>{{ xcwd }}</p>
              </div>
              <div class="mode-box">
                <p>现场湿度</p>
                <p>{{ xcsd }}</p>
              </div>
              <div class="mode-box">
                <p>模式</p>
                <p>{{ jqrms }}</p>
              </div>
              <div class="mode-box">
                <p>方向</p>
                <p>{{ jqrfx }}</p>
              </div>
              <div class="mode-box">
                <p>电池电压</p>
                <p>{{ dcdy }}</p>
              </div>
            </div>
            <div style="margin-left: 14px; margin-bottom: 5px">
              <img src="../../components/images/line.png" alt="" />
            </div>
            <div class="Mode-selection">
              <p>模式选择</p>
            </div>
            <!-- 五个按钮 -->
            <div class="Operation-button" id="#btn">
              <div class="Operation-buttonBox" @click="jqrmsF('1')">
                <el-button size="mini" circle @click="selectedTab = 0"></el-button>
                <p>手动模式</p>
              </div>
              <!--              <div class="Operation-buttonBox" @click="jqrmsF('2')">-->
              <!--                  <el-button size="mini" circle style="-->
              <!--                                                  background: linear-gradient(227deg, #0F947C, #10DAB2);">-->
              <!--                  </el-button>-->
              <!--                  <p>自动模式</p>-->
              <!--             </div>-->
              <div class="Operation-buttonBox" @click="jqrzymsF('0')" v-hasPermi="['robot:syzyms:view']">
                <el-button @click="selectedTab = 3" size="mini" circle
                           style="background: linear-gradient(227deg, #c45016, #f58614)">
                </el-button>
                <p>自由</p>
              </div>
              <div class="Operation-buttonBox" @click="jqrzymsF('3')">
                <el-button size="mini" circle style="background: linear-gradient(227deg, #337f17, #3ca813)">
                </el-button>
                <p>返航</p>
              </div>
              <div class="Operation-buttonBox" @click="zt()">
                <el-button size="mini" circle style="background: linear-gradient(227deg, #b72517, #ea392d)">
                </el-button>
                <p>暂停</p>
              </div>
            </div>
          </div>
          <!-- 手动模式 -->
          <div class="right-bottom1" v-if="selectedTab === 0">
            <div class="right-bottomTitle">
              <p>手动模式</p>
              <p></p>
            </div>
            <div style="display: flex; flex-direction: column; align-items: center">
              <div class="Target-position">
                <div class="Target-position1">
                  <p contenteditable="true" id="mbwzid">0</p>
                  <p>m</p>
                </div>
                <div class="Target-position2">
                  <p style="cursor: pointer" @click="mbwzF()">目标位置</p>
                </div>
              </div>
              <div class="Speed-setting">
                <div class="Speed-setting1">
                  <el-dropdown @command="sdmslb" style="margin-left: 12px">
                    <el-button type="primary" size="min" style="
                        width: 80px;
                        height: 30px;
                        background: #17255d !important;
                        border: 2px solid #54619d;
                        border-radius: 10px;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #c1c1c1;
                      ">
                      {{ sdmssdzd
                      }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="0">0</el-dropdown-item>
                      <el-dropdown-item command="1000">1000</el-dropdown-item>
                      <el-dropdown-item command="2000">2000</el-dropdown-item>
                      <el-dropdown-item command="3000">3000</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <p>r/min</p>
                </div>
                <div class="Target-position2">
                  <p style="cursor: pointer" @click="sdmsdF()">设定速度</p>
                </div>
              </div>
              <div class="right-bottomBox4" v-if="showButtons">
                <el-button class="btn1" size="default" @click="fgfun()">放钩</el-button>
                <el-button class="btn2" size="default" @click="sgfun()">收钩</el-button>
              </div>
              <div class="Operation-Btn">
                <el-button class="Operation-Btn1" size="mini" @click="sdmsqd()">启动</el-button>
                <el-button class="Operation-Btn2" size="mini" @click="sdmsqj()">前进</el-button>
                <el-button class="Operation-Btn3" size="mini" @click="sdmsht()">后退</el-button>
              </div>
            </div>
          </div>
          <!-- 自动模式 -->
          <div class="right-bottom2" v-if="selectedTab === 1">
            <div class="right-bottomTitle">
              <p>自动模式</p>
              <span></span>
            </div>
            <div class="right-bottomBox">
              <div class="right-bottomBox1">
                <el-dropdown @command="zdmslb">
                  <el-button type="primary" size="min" style="
                      width: 80px;
                      height: 30px;
                      background: #17255d !important;
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      border: 2px solid #54619d;
                      border-radius: 10px;
                      font-size: 12px;
                      font-family: Bahnschrift;
                      font-weight: 400;
                      color: #c1c1c1;
                    ">
                    {{ zdmssdzd
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">0</el-dropdown-item>
                    <el-dropdown-item command="1000">1000</el-dropdown-item>
                    <el-dropdown-item command="2000">2000</el-dropdown-item>
                    <el-dropdown-item command="3000">3000</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span>r/min</span>
                <el-button class="btn" size="default" @click="zdmsdsd()">速度设定</el-button>
              </div>
              <div class="right-bottomBox2" v-if="showButtons">
                <el-button class="btn1" size="default" @click="fgfun()">放钩</el-button>
                <el-button class="btn2" size="default" @click="sgfun()">收钩</el-button>
              </div>
              <div class="right-bottomBox3">
                <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
                <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
                <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
              </div>
            </div>
          </div>
          <!-- 一键返航 -->
          <div class="right-bottom3" v-if="selectedTab === 2">
            <div class="right-bottomTitle">
              <p>一键返航</p>
              <span></span>
            </div>
            <div class="right-bottomBox">
              <el-button class="btn" size="default" @click="yjfh()">返航</el-button>
            </div>
          </div>
          <!-- 自由模式 -->
          <div class="right-bottom4" v-if="selectedTab === 3">
            <div class="right-bottomTitle">
              <p>自由模式</p>
              <span></span>
            </div>
            <div class="right-bottomBox">
              <div class="right-bottomBox1">
                <el-dropdown @command="zymslb">
                  <el-button type="primary" size="min" style="
                      width: 80px;
                      height: 30px;
                      background: #17255d !important;
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      border: 2px solid #54619d;
                      border-radius: 10px;
                      font-size: 12px;
                      font-family: Bahnschrift;
                      font-weight: 400;
                      color: #c1c1c1;
                    ">
                    {{ zymssdzd
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">0</el-dropdown-item>
                    <el-dropdown-item command="1000">1000</el-dropdown-item>
                    <el-dropdown-item command="2000">2000</el-dropdown-item>
                    <el-dropdown-item command="3000">3000</el-dropdown-item>
                    <el-dropdown-item command="4000">4000</el-dropdown-item>
                    <el-dropdown-item command="5000">5000</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span>r/min</span>
                <el-button class="btn" size="default" @click="zymsdsd()">速度设定</el-button>
              </div>
              <div class="right-bottomBox2" v-if="showButtons">
                <el-button class="btn1" size="default" @click="fgfun()">放钩</el-button>
                <el-button class="btn2" size="default" @click="sgfun()">收钩</el-button>
              </div>
              <div class="right-bottomBox3">
                <el-button class="btn1" size="default" @click="zymsqd()">启动</el-button>
                <el-button class="btn2" size="default" @click="zymsqj()">前进</el-button>
                <el-button class="btn3" size="default" @click="zymsht()">后退</el-button>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import "echarts-liquidfill";
  import { listonPageRobotConfig } from "@/api/robot/robotconfig/robotconfig";
  import { getTrackMaprobot } from "@/api/robot/trackmap/trackmap";
  import rbt from "@/assets/imgs/rbt3.png";
  import rbt1 from "@/assets/imgs/rbt4.png";
  import point from "@/assets/imgs/point1.png";
  import { listsPlc } from "@/api/robot/plc/plc";
  import {
    bgtzCmd,
    bwgCmd,
    bzgCmd,
    ddmkCmd,
    ddmztCmd,
    ddspCmd,
    dmgCmd,
    fgCmd,
    htCmd,
    ippingCmd,
    jqrdataCmd,
    jqrsdCmd,
    jqrsdzymsCmd,
    lxspCmd,
    mbwzCmd,
    msszCmd,
    plcdataCmd,
    qjCmd,
    robotrunCmd,
    robotstopCmd,
    sgCmd,
    xjsdCmd,
    yjfhCmd,
    zdqdCmd,
    zymshtCmd,
    zymsmsszCmd,
    zymsqjCmd,
    zymsrobotrunCmd,
  } from "@/api/robot/modbus/modbus";
  import { onLineStatus } from "@/api/robot/camera/cameraDH/video";
  import $ from "jquery";
  import { alarmtaskResult } from "@/api/robot/patroltask/patroltask";
  import Vue from "vue";

  let myChart = null;
  let myChart1 = null;
  let myChart2 = null;
  let myChart3 = null;
  let myChart4 = null;
  let myChart5 = null;
  let myChart6 = null;
  let myChart7 = null;
  let myChart8 = null;
  let myChart9 = null;
  let myChart10 = null;

  export default {
    /* 获取最外层盒子 */
    name: "home",
    data() {
      return {
        videoElement: null,
        videoElement1:null,
        player: null,
        playerQ: null,
        playerH: null,
        //是否展示视频
        videoShowQ: false,
        videoShowH: false,
        //存放没有数据时提示信息的
        result: [],
        //控制点击救援增加的按钮
        showButtons: false,
        zymssdzd: 1000, //自由模式速度设定
        zdmssdzd: 1000, //自动模式速度设定
        sdmssdzd: 1000, //手动模式速度设定
        //切换不同的监控画面,默认大华的类型
        camera_type: 0,

        //控制模式板块的切换(表示默认显示第一个内容)
        selectedTab: 0,
        timerval: null, // 定时器名称
        //报警列表
        alarms: [{ alarmtime: "暂无数据" }],
        //查询参数
        queryparm: {
          robot_config_id: undefined,
          robot_id: undefined,
          robotid: undefined,
          valu: undefined,
          robot_ip: undefined,
          robot_port: undefined,
          plcip: undefined,
          plcport: undefined,
          residence_time: undefined,
        },
        queryparms3: {
          robot_id: undefined,
          valu: undefined,
          robot_ip: undefined,
          robot_port: undefined,
          plcip: undefined,
          plcport: undefined,
          video_ip1: undefined,
          video_name1: undefined,
          video_pwd1: undefined,
          video_port1: undefined,
          residence_time: undefined,
          plcid: undefined,
          video_ip2: undefined,
          video_name2: undefined,
          video_pwd2: undefined,
          video_port2: undefined,
        }, //摄像头参数
        queryparms4: {
          valu: undefined,
          //camera_type:localStorage.getItem("camera_type"),
          video_ip1: localStorage.getItem("video_ip1"),
          video_name1: localStorage.getItem("video_name1"),
          video_pwd1: localStorage.getItem("video_pwd1"),
          video_port1: localStorage.getItem("video_port1"),
          residence_time: undefined,
          video_ip2: localStorage.getItem("video_ip2"),
          video_name2: localStorage.getItem("video_name2"),
          video_pwd2: localStorage.getItem("video_pwd2"),
          video_port2: localStorage.getItem("video_port2"),
          robot_config_id: localStorage.getItem("robot_config_id"),
        }, //plc列表数据
        plcList: [],
        reports: [],
        queryParams: {
          plc_name: undefined,
        },
        queryParams1: {
          plcid: undefined,
        },
        queryParams2: {
          robotid: undefined,
        }, //plc默认选中项
        selectedOption: [],
        patrols: [{ creater_time_str: "暂无数据" }],
        //机器人列表
        robots: [],
        arrdata: [[]],
        robotid: undefined,
        creater_time_str: undefined,
        resc: undefined,
        //表单参数
        form: {},
        //机器人列表
        loading: true, //遮罩层
        count: 0,
        //查询参数
        sswy: "无", //实时位移
        gdzcd: "无", //轨道长度
        tzcd: "无", //停止充电
        kqcd: "无", //开始充电
        tsjxj: "无", //准备下降提升机
        tsjss: "无", //准备上升提升机
        gbddm: "无", //准备关闭电动门
        kqddm: "无", //准备开启电动门
        djwd: "无", //电机温度
        dj1: "无", //1#电机
        dj2: "无", //2#电机
        sxt1: "无", //1#摄像头
        sxt2: "无", //2#摄像头
        zmd1: "无", //照明灯1
        zmd2: "无", //照明灯2
        yxd: "无", //运行灯
        sg: "无", //收钩
        fg: "无", //放钩
        djzs: "无", //电机转速
        jw: "无", //甲烷
        yq: "无", //氧气
        lhq: "无", //硫化氢
        aq: "无", //氨气
        xcwd: "无", //现场温度
        xcsd: "无", //现场湿度
        dczt: "无", //电池状态
        dcdl: "无", //电池电量
        dcdy: "无", //电池电压
        dqjcdwz: "无", //当前巡检点位置
        gswl: "无", //格栅设定数量
        jcgssl: "无", //检测格栅孔数量
        jqrms: "无", //机器人模式
        jqrsd: "无", //机器人速度设定
        jqrfx: "无", //机器人方向
        mbwz: "无", //目标位置值设定
        cdzdwxh1: "无", //充电桩机器人到位信号1
        cdzdwxh2: "无", //充电桩机器人到位信号1
        tsjjqrdwxh1: "无", //提升装置机器人到位信号1
        tsjjqrdwxh2: "无", //提升装置机器人到位信号2
        ddmkdw: "无", //电动门开到位
        ddmgdw: "无", //电动门关到位
        tsjssdw1: "无", //提升装置轨道到位1（上升到位）
        tsjxjdw2: "无", //提升装置轨道到位2（下降到位）
        // 警告数据中间
        animate: false,
        input: 20,
        drawer: false,
        dialog: false,
        direction: "ltr",
        directions: "rtl",
        timer: null,
        timer1: null,
        timer2: null,
        //控制机器人的滚动条
        isDologin: false,
        rtspQurl: "", //前rtsp视频流地址
        flvQUrl: null, //请求回来的flv视频流地址
        rtspHurl: "", //后rtsp视频流地址
        flvHUrl: null, //请求回来的flv视频流地址
      };
    },
    created() {
      //初始化页面加载方法
      this.getrobotList(); //初始化机器人列表数据
      this.getplcList(); //初始化plc列表数据
      this.getMap(); //电子地图
      // this.getQOnlie(); //摄像头状态
    },
    mounted() {
      //加载完页面加载方法
      //是否显示脱钩、放钩按钮
      localStorage.getItem("robotype") === "1"
        ? (this.showButtons = true)
        : (this.showButtons = false);
      //标题初始化
      $("#robotxj").text(
        localStorage.getItem("robot_name") == null
          ? "机器人巡检监控"
          : localStorage.getItem("robot_name") + "巡检监控"
      );
      //定时器轮询程序
      this.timer = setInterval(() => {
        this.getrobotList(); //机器人列表
        this.getplcList(); //plc列表
        this.alarmtask(); //报警数据、巡检列表
        this.getMap(); //电子地图
        this.robotdata(); //机器人实时数据、环境参数水滴图
        this.plcdata(); //plc实时数据
        this.initEcharts(); //环境参数检测、柱状图
      }, 2000); //2000毫秒
      // this.spbf(localStorage.getItem("camera_type"));//挂在完成后播放当前的监控视频
      setInterval(this.scroll, 5000); //初始化滚动警告数据
      this.infinitScroll(); //巡检列表滚动逻辑
      this.getQOnlie();
      this.videoElement = this.$refs.videoElement;
      this.videoElement1 = this.$refs.videoElement1;
      //this.playerPlay();
      if (this.camera_type != null && localStorage.getItem("camera_type") != "") {
        //====大华摄像头======
        if (this.camera_type == 0) {
          //大华前摄像头
          if (
            localStorage.getItem("video_ip1") != null &&
            localStorage.getItem("video_ip1") != ""
          ) {
            this.playerStop()//停止
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip1")).then((response) => {
              if (
                typeof response.data.data != "undefined" &&
                response.data.data != null &&
                response.data.data == true
              ) {
                this.playerPlay();
                this.videoShowQ = true;
              } else {
                this.videoShowQ = false; //如果ip密码账户名不存在则隐藏前摄像头
              }
            });
          } else {
            this.videoShowQ = false; //如果ip密码账户名不存在则隐藏前摄像头
          }
          //大华后摄像头
          if (
            localStorage.getItem("video_ip2") != null &&
            localStorage.getItem("video_ip2") != ""
          ) {
            this.playerStop()//停止
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip2")).then((response) => {
              if (
                typeof response.data.data != "undefined" &&
                response.data.data != null &&
                response.data.data == true
              ) {
                this.playerPlay();
                this.videoShowH = true;
              } else {
                this.videoShowH = false;
              }
            });
          } else {
            this.videoShowH = false;
          }
        }
      }
    },
    methods: {
      playerStop() {
        this.player?.close();
      },
      playerPause() {
        this.player?.pause();
      },
      playerContinue() {
        this.player?.play();
      },
      playerCapture() {
        this.player?.capture('test');
      },
      playerPlay() {
        const options1 = {
          wsURL: 'ws://'+ localStorage.getItem("video_ip1")+'/rtspoverwebsocket',
          rtspURL: 'rtsp://'+ localStorage.getItem("video_ip1")+'/cam/realmonitor?channel=1&subtype=0&proto=Private3',
          username:  localStorage.getItem("video_name1"),
          password:  localStorage.getItem("video_pwd1")
        };
        this.player = new window.PlayerControl(options1);
        this.player.on('WorkerReady', () => {
          this.player.connect();
        });
        this.player.on('DecodeStart', (rs) => {
          console.log('start decode');
          console.log(rs);
        });
        this.player.on('PlayStart', (rs) => {
          console.log('play');
          console.log(rs);
        });
        this.player.on('Error', (rs) => {
          console.log('error');
          console.log(rs);
        });
        this.player.on('FileOver', (rs) => {
          console.log('recorder play over');
          console.log(rs);
        });
        this.player.on('MSEResolutionChanged', (rs) => {
          console.log('resolution changed');
          console.log(rs);
        });
        this.player.on('FrameTypeChange', (rs) => {
          console.log('video encode mode changed');
          console.log(rs);
        });
        this.player.on('audioChange', (rs) => {
          console.log('audio encode changed');
          console.log(rs);
        });
        const options2 = {
          wsURL: 'ws://'+ localStorage.getItem("video_ip2")+'/rtspoverwebsocket',
          rtspURL: 'rtsp://'+ localStorage.getItem("video_ip2")+'/cam/realmonitor?channel=1&subtype=0&proto=Private3',
          username:  localStorage.getItem("video_name2"),
          password:  localStorage.getItem("video_pwd2")
        };
        this.player1 = new window.PlayerControl(options2);
        this.player1.on('WorkerReady', () => {
          this.player1.connect();
        });
        this.player1.on('DecodeStart', (rs) => {
          console.log('start decode');
          console.log(rs);
        });
        this.player1.on('PlayStart', (rs) => {
          console.log('play');
          console.log(rs);
        });
        this.player1.on('Error', (rs) => {
          console.log('error');
          console.log(rs);
        });
        this.player1.on('FileOver', (rs) => {
          console.log('recorder play over');
          console.log(rs);
        });
        this.player1.on('MSEResolutionChanged', (rs) => {
          console.log('resolution changed');
          console.log(rs);
        });
        this.player1.on('FrameTypeChange', (rs) => {
          console.log('video encode mode changed');
          console.log(rs);
        });
        this.player1.on('audioChange', (rs) => {
          console.log('audio encode changed');
          console.log(rs);
        });
        this.player.init(this.videoElement,this.videoElement);
        this.player1.init(this.videoElement1,this.videoElement1);
      },
      //根据机器人查询数据
      selectrobot(row) {
        localStorage.removeItem("robot_config_id"); //删除机器人id
        localStorage.removeItem("robot_name"); //删除机器人名称
        localStorage.removeItem("video_ip1"); //删除摄像头1ip
        localStorage.removeItem("video_port1"); //删除摄像头1端口号
        localStorage.removeItem("video_name1"); //删除摄像头1账号
        localStorage.removeItem("video_pwd1"); //删除摄像头1密码
        localStorage.removeItem("video_ip2"); //删除摄像头2ip
        localStorage.removeItem("video_port2"); //删除摄像头2端口号
        localStorage.removeItem("video_name2"); //删除摄像头2账号
        localStorage.removeItem("video_pwd2"); //删除摄像头2密码
        localStorage.removeItem("robotype"); //删除机器人类型
        localStorage.removeItem("camera_type"); //删除摄像头类型
        localStorage.setItem("robot_config_id", row.id); //存储值
        localStorage.setItem("robot_name", row.robot_name); //存储值
        localStorage.setItem("video_ip1", row.video_ip1); //存储值
        localStorage.setItem("video_port1", row.video_port1); //存储值
        localStorage.setItem("video_name1", row.video_name1); //存储值
        localStorage.setItem("video_pwd1", row.video_pwd1); //存储值
        localStorage.setItem("video_ip2", row.video_ip2); //存储值
        localStorage.setItem("video_port2", row.video_port2); //存储值
        localStorage.setItem("video_name2", row.video_name2); //存储值
        localStorage.setItem("video_pwd2", row.video_pwd2); //存储值
        localStorage.setItem("robotype", row.robot_type); //存储值
        localStorage.setItem("camera_type", row.camera_type); //存储值
        this.queryparm.robotid = localStorage.getItem("robot_config_id");
        this.queryparm.residence_time = localStorage.getItem("residence_time"); //设置停留时间
        //摄像头参数
        this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
        this.queryparms4.video_name1 = localStorage.getItem("video_name1");
        this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
        this.queryparms4.video_port1 = localStorage.getItem("video_port1");
        this.queryparms4.video_ip2 = localStorage.getItem("video_ip2");
        this.queryparms4.video_name2 = localStorage.getItem("video_name2");
        this.queryparms4.video_pwd2 = localStorage.getItem("video_pwd2");
        this.queryparms4.video_port2 = localStorage.getItem("video_port2");
        this.queryparms4.robot_config_id =
          localStorage.getItem("robot_config_id");
        $("#robotxj").text(localStorage.getItem("robot_name") + "巡检监控"); //机器人名称标题
        localStorage.getItem("robotype") === "1"
          ? (this.showButtons = true)
          : (this.showButtons = false); //是否显示脱钩、放钩按钮
        this.getplcList(); //根据机器人id查询plc列表
        //this.getreportList();//巡检报告
        this.robotdata(); //查询当前机器人数据
        this.camera_type = localStorage.getItem("camera_type");
        this.getQOnlie(); //摄像头状态
        //====大华摄像头======
        if (
          this.camera_type != null &&
          localStorage.getItem("camera_type") != ""
        ) {
          //====大华摄像头======
          if (this.camera_type == 0) {
            //大华前摄像头
            if (
              localStorage.getItem("video_ip1") != null &&
              localStorage.getItem("video_ip1") != ""
            ) {
              this.playerStop()//停止
              //检测摄像头ip通不通
              ippingCmd(localStorage.getItem("video_ip1")).then((response) => {
                if (
                  typeof response.data.data != "undefined" &&
                  response.data.data != null &&
                  response.data.data == true
                ) {
                  this.playerPlay();
                  this.videoShowQ = true;
                } else {
                  this.videoShowQ = false; //如果ip密码账户名不存在则隐藏前摄像头
                }
              });
            } else {
              this.videoShowQ = false; //如果ip密码账户名不存在则隐藏前摄像头
            }
            //大华后摄像头
            if (
              localStorage.getItem("video_ip2") != null &&
              localStorage.getItem("video_ip2") != ""
            ) {
              this.playerStop()//停止
              //检测摄像头ip通不通
              ippingCmd(localStorage.getItem("video_ip2")).then((response) => {
                if (
                  typeof response.data.data != "undefined" &&
                  response.data.data != null &&
                  response.data.data == true
                ) {
                  this.playerPlay();
                  this.videoShowH = true;
                } else {
                  this.videoShowH = false;
                }
              });
            } else {
              this.videoShowH = false;
            }
          }
        }
      },
      //获取摄像头在线或离线
      getQOnlie() {
        //====== 大华摄像头==========
        if (this.camera_type == 0) {
          if (
            localStorage.getItem("video_ip1") != null &&
            localStorage.getItem("video_ip1") != "" &&
            localStorage.getItem("video_ip2") != null &&
            localStorage.getItem("video_ip2") != "" &&
            localStorage.getItem("video_name1") != null &&
            localStorage.getItem("video_name1") != "" &&
            localStorage.getItem("video_name2") != null &&
            localStorage.getItem("video_name2") != "" &&
            localStorage.getItem("video_pwd1") != null &&
            localStorage.getItem("video_pwd1") != "" &&
            localStorage.getItem("video_pwd2") != null &&
            localStorage.getItem("video_pwd2") != "" &&
            localStorage.getItem("video_port1") != null &&
            localStorage.getItem("video_port1") != "" &&
            localStorage.getItem("video_port2") != null &&
            localStorage.getItem("video_port2") != ""
          ) {
            this.queryparms4.robot_config_id =
              localStorage.getItem("robot_config_id");
            onLineStatus(this.queryparms4).then((response) => {
              // this.OnlineArry1 = response.data[0];
              // this.OnlineArry2 = response.data[1];
              // this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
            });
          }
        } else {
          this.onlineList = null;
        }
        //====== 吊舱摄像头==========
        if (this.camera_type == 2) {
          this.queryparms4.robot_config_id =
            localStorage.getItem("robot_config_id");
          if (
            localStorage.getItem("video_ip1") != null &&
            localStorage.getItem("video_ip1") != ""
          ) {
            onLineStatus(this.queryparms4).then((response) => {
              // this.OnlineArry1 = response.data[0];
              // this.OnlineArry2 = response.data[1];
              // this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
            });
          }
        } else {
          this.onlineList = null;
        }
        //====== 海康摄像头==========
        if (this.camera_type == 1) {
          if (
            localStorage.getItem("video_ip1") != null &&
            localStorage.getItem("video_ip1") != "" &&
            localStorage.getItem("video_name1") != null &&
            localStorage.getItem("video_name1") != "" &&
            localStorage.getItem("video_pwd1") != null &&
            localStorage.getItem("video_pwd1") != "" &&
            localStorage.getItem("video_port1") != null &&
            localStorage.getItem("video_port1") != ""
          ) {
            this.queryparms4.robot_config_id =
              localStorage.getItem("robot_config_id");
            onLineStatus(this.queryparms4).then((response) => {
              // this.OnlineArry1 = response.data[0];
              // this.OnlineArry2 = response.data[1];
              // this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
            });
          }
        } else {
          this.onlineList = null;
        }
      },
      //定时任务查询当前机器人数据柱状图
      robotdata() {
        this.queryparm.robotid = localStorage.getItem("robot_config_id");
        if (
          typeof this.queryparm.robotid != "undefined" &&
          this.queryparm.robotid != null &&
          this.queryparm.robotid != ""
        ) {
          //实时数据
          jqrdataCmd(this.queryparm).then((response) => {
            if (typeof response.data != "undefined" && response.data != null) {
              this.dczt = response.data.dczt; //电池状态
              this.sswy = response.data.sswy; //实时位移
              this.gdzcd = response.data.gdzcd; //轨道长度
              this.dcdy = response.data.dcdy; //电池电压
              this.djwd = response.data.djwd; //电机温度
              this.djzs = response.data.djzs; //电机转速
              this.dcdl = response.data.dcdl; //电池电量
              this.jqrfx = response.data.jqrfx; //机器人方向
              this.jqrms = response.data.jqrms; //机器人模式
              this.jw = response.data.jw; //甲烷浓度
              this.yq = response.data.yq; //氧气浓度
              this.aq = response.data.aq; //氨气
              this.lhq = response.data.lhq; //硫化氢
              this.xcwd = response.data.xcwd; //现场温度
              this.xcsd = response.data.xcsd; //现场湿度
              this.gswl = response.data.gswl; //格栅设定数量
              this.jcgssl = response.data.jcgssl; //检测格栅孔数量
              this.dj1 = response.data.dj1; //1#电机
              this.dj2 = response.data.dj2; //2#电机
              this.sxt1 = response.data.sxt1; //1#摄像头
              this.sxt2 = response.data.sxt2; //2#摄像头
              this.zmd1 = response.data.zmd1; //照明灯1
              this.zmd2 = response.data.zmd2; //照明灯2
              this.yxd = response.data.yxd; //运行灯
              this.sg = response.data.sg; //收钩
              this.fg = response.data.fg; //放钩
              this.drawLiquidfill(
                this.yq,
                this.jw,
                this.lhq,
                this.aq,
                this.xcsd,
                this.xcwd,
                localStorage.getItem("robot_name")
              );
              if (this.dialog) {
                this.echarts1(this.djzs); //电机转速
                this.echarts2(this.djwd); //电机温度
                this.echarts3(this.dcdl); //电池电量
              }
            } else {
              this.dczt = "无"; //电池状态
              this.sswy = "无"; //实时位移
              this.gdzcd = "无"; //轨道长度
              this.dcdy = "无"; //电池电压
              this.djwd = "无"; //电机温度
              this.djzs = "无"; //电机转速
              this.dcdl = "无"; //电池电量
              this.jqrfx = "无"; //机器人方向
              this.jqrms = "无"; //机器人模式
              this.jw = "无"; //甲烷浓度
              this.yq = "无"; //氧气浓度
              this.aq = "无"; //氨气
              this.lhq = "无"; //硫化氢
              this.xcwd = "无"; //现场温度
              this.xcsd = "无"; //现场湿度
              this.gswl = "无"; //格栅设定数量
              this.jcgssl = "无"; //检测格栅孔数量
              (this.dj1 = "无"), //1#电机
                (this.dj2 = "无"), //2#电机
                (this.sxt1 = "无"), //1#摄像头
                (this.sxt2 = "无"), //2#摄像头
                (this.zmd1 = "无"), //照明灯1
                (this.zmd2 = "无"), //照明灯2
                (this.yxd = "无"), //运行灯
                (this.sg = "无"), //收钩
                (this.fg = "无"), //放钩
                this.drawLiquidfill(
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  localStorage.getItem("robot_name")
                );
              if (this.dialog) {
                this.echarts1(0); //电机转速
                this.echarts2(0); //电机温度
                this.echarts3(0); //电池电量
              }
            }
          });
        } else {
          this.dczt = "无"; //电池状态
          this.sswy = "无"; //实时位移
          this.gdzcd = "无"; //轨道长度
          this.dcdy = "无"; //电池电压
          this.djwd = "无"; //电机温度
          this.djzs = "无"; //电机转速
          this.dcdl = "无"; //电池电量
          this.jqrfx = "无"; //机器人方向
          this.jqrms = "无"; //机器人模式
          this.jw = "无"; //甲烷浓度
          this.yq = "无"; //氧气浓度
          this.aq = "无"; //氨气
          this.lhq = "无"; //硫化氢
          this.xcwd = "无"; //现场温度
          this.xcsd = "无"; //现场湿度
          this.gswl = "无"; //格栅设定数量
          this.jcgssl = "无"; //检测格栅孔数量
          (this.dj1 = "无"), //1#电机
            (this.dj2 = "无"), //2#电机
            (this.sxt1 = "无"), //1#摄像头
            (this.sxt2 = "无"), //2#摄像头
            (this.zmd1 = "无"), //照明灯1
            (this.zmd2 = "无"), //照明灯2
            (this.yxd = "无"), //运行灯
            (this.sg = "无"), //收钩
            (this.fg = "无"), //放钩
            this.drawLiquidfill(
              0,
              0,
              0,
              0,
              0,
              0,
              localStorage.getItem("robot_name")
            );
          if (this.dialog) {
            this.echarts1(0); //电机转速
            this.echarts2(0); //电机温度
            this.echarts3(0); //电池电量
          }
        }
      }, //定时刷新plc实时数据
      plcdata() {
        this.queryParams1.plcid = localStorage.getItem("plcid");
        if (
          typeof this.queryParams1.plcid != "undefined" &&
          this.queryParams1.plcid != null &&
          this.queryParams1.plcid != ""
        ) {
          plcdataCmd(this.queryParams1).then((response) => {
            if (typeof response.data != "undefined" && response.data != null) {
              this.cdzdwxh1 = response.data.cdzdwxh1; //充电桩机器人到位信号1
              this.cdzdwxh2 = response.data.cdzdwxh2; //充电桩机器人到位信号2
              this.tsjjqrdwxh1 = response.data.tsjjqrdwxh1; //提升装置到位信号1
              this.tsjjqrdwxh2 = response.data.tsjjqrdwxh2; //提升装置到位信号2
              this.tsjssdw1 = response.data.tsjssdw1; //提升装置轨道到位1（上升到位）
              this.tsjxjdw2 = response.data.tsjxjdw2; //提升装置轨道到位2（下降到位）
              this.ddmkdw = response.data.ddmkdw; //电动门开到位
              this.ddmgdw = response.data.ddmgdw; //电动门关到位
            } else {
              this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
              this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
              this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
              this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
              this.tsjssdw1 = "无"; //提升装置轨道到位1（上升到位）
              this.tsjxjdw2 = "无"; //提升装置轨道到位2（下降到位）
              this.ddmkdw = "无"; //电动门开到位
              this.ddmgdw = "无"; //电动门关到位
            }
          });
        } else {
          this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
          this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
          this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
          this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
          this.tsjssdw1 = "无"; //提升装置轨道到位1（上升到位）
          this.tsjxjdw2 = "无"; //提升装置轨道到位2（下降到位）
          this.ddmkdw = "无"; //电动门开到位
          this.ddmgdw = "无"; //电动门关到位
        }
      },
      //根据机器人id查询plc列表
      getplcList() {
        this.queryParams.robot_config_id =
          localStorage.getItem("robot_config_id");
        if (
          typeof this.queryParams.robot_config_id != "undefined" &&
          this.queryParams.robot_config_id != null &&
          this.queryParams.robot_config_id != ""
        ) {
          let fg = 0;
          listsPlc(this.queryParams).then((response) => {
            this.plcList = response.rows;
            if (typeof this.plcList != "undefined" && this.plcList.length > 0) {
              if (
                typeof this.selectedOption[0] != "undefined" &&
                this.selectedOption[0] != null
              ) {
                //获取当前在线plc赋值给选择列表框
                const plc_len = this.plcList.length;
                for (let i = 0; i < plc_len; i++) {
                  if (
                    localStorage.getItem("plcid") ==
                    this.plcList[i].robot_config_id +
                    "_" +
                    this.plcList[i].plc_num
                  ) {
                    this.selectedOption = [];
                    this.selectedOption.push(
                      this.plcList[i].plc_name +
                      " " +
                      (this.plcList[i].plc_state == 1 ? "在线" : "离线")
                    );
                    localStorage.removeItem("plcid"); //删除键值
                    localStorage.setItem(
                      "plcid",
                      this.plcList[i].robot_config_id +
                      "_" +
                      this.plcList[i].plc_num
                    ); //存储值
                    fg = 1;
                    break;
                  }
                } //如果是没有相同值，赋新值给选择列表框
                if (fg == 0) {
                  this.selectedOption = [];
                  this.selectedOption.push(
                    this.plcList[i].plc_name +
                    " " +
                    (this.plcList[i].plc_state == 1 ? "在线" : "离线")
                  );
                  localStorage.removeItem("plcid"); //删除键值
                  localStorage.setItem(
                    "plcid",
                    this.plcList[0].robot_config_id +
                    "_" +
                    this.plcList[0].plc_num
                  ); //存储值
                }
              } else {
                //选择框没有赋值，赋新值给选择列表框
                this.selectedOption = [];
                this.selectedOption.push(
                  this.plcList[0].plc_name +
                  " " +
                  (this.plcList[0].plc_state == 1 ? "在线" : "离线")
                ); //默认下拉框选择第一条记录
                localStorage.removeItem("plcid"); //删除键值
                localStorage.setItem(
                  "plcid",
                  this.plcList[0].robot_config_id + "_" + this.plcList[0].plc_num
                ); //存储值
              }
            } else {
              localStorage.removeItem("plcid"); //删除键值
              this.selectedOption = [];
              this.plcList = [];
            }
            this.plcdata(); //根据plc的id查询电气参数数据
          });
        }
      }, //根据机器人id查询报警、巡检列表
      alarmtask() {
        this.queryparm.robot_config_id = localStorage.getItem("robot_config_id");
        if (
          typeof this.queryparm.robot_config_id != "undefined" &&
          this.queryparm.robot_config_id != null &&
          this.queryparm.robot_config_id != ""
        ) {
          alarmtaskResult(this.queryparm).then((response) => {
            if (typeof response.data != "undefined" && response.data != null) {
              //巡检结果列表
              if (
                response.data.taskresult != null &&
                response.data.taskresult.length > 0
              ) {
                this.patrols = [];
                this.patrols = response.data.taskresult;
              } else {
                this.patrols = [{ creater_time_str: "暂无数据" }];
              } //报警结果列表
              if (
                response.data.alarmresult != null &&
                response.data.alarmresult.length > 0
              ) {
                this.alarms = [];
                this.alarms = response.data.alarmresult;
              } else {
                this.alarms = [{ alarmtime: "暂无数据" }];
              }
            }
          });
        }
      }, //*查询机器人列表
      getrobotList() {
        listonPageRobotConfig(this.queryParams).then((response) => {
          this.robots = response.rows;
        });
      }, //选择plc列表，缓存plcid
      getOptionPLC(plcid) {
        localStorage.removeItem("plcid"); //删除键值
        localStorage.setItem("plcid", plcid); //存储值
        this.plcdata(); //查询电气参数数据
      },
      //中间滚动警告数据
      scroll() {
        this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
        this.timer1 = setTimeout(() => {
          //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
          this.alarms.push(this.alarms[0]); // 将数组的第一个元素添加到数组的
          this.alarms.shift(); //删除数组的第一个元素
          this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
        }, 3000);
      }, //目标位置
      mbwzF() {
        this.queryparms3.valu = $("#mbwzid").text();
        console.log("目标位置" + this.queryparms3.valu);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          mbwzCmd(this.queryparms3).then((response) => {
            if (typeof response != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("目标位置不能为空");
        }
      }, //手动模式速度设置
      sdmsdF() {
        this.queryparms3.valu = this.sdmssdzd;
        console.log("手动模式速度设置" + this.sdmssdzd);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          jqrsdCmd(this.queryparms3).then((response) => {
            if (typeof response != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("手动模式速度设置不能为空");
        }
      }, //电动门暂停
      ddmzt() {
        this.queryParams1.plcid = localStorage.getItem("plcid");
        ddmztCmd(this.queryParams1).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //电动门关
      ddmg() {
        this.queryParams1.plcid = localStorage.getItem("plcid");
        dmgCmd(this.queryParams1).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //电动门开
      ddmk() {
        this.queryParams1.plcid = localStorage.getItem("plcid");
        ddmkCmd(this.queryParams1).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //变轨停止
      bgtz() {
        this.queryParams1.plcid = localStorage.getItem("plcid");
        bgtzCmd(this.queryParams1).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //变直轨
      bzg() {
        this.queryParams1.plcid = localStorage.getItem("plcid");
        bzgCmd(this.queryParams1).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //变弯轨
      bwg() {
        this.queryParams1.plcid = localStorage.getItem("plcid");
        bwgCmd(this.queryParams1).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //放钩
      fgfun() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        fgCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //收钩
      sgfun() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        sgCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //自由模式后退
      zymsht() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymshtCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //自由模式前进
      zymsqj() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymsqjCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //自由模式(启动)
      zymsqd() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymsrobotrunCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //手动模式速度设定
      sdmslb(sdmssdzd) {
        this.sdmssdzd = sdmssdzd;
      }, //自动模式速度设定
      zdmslb(zdmssdzd) {
        this.zdmssdzd = zdmssdzd;
      }, //自动模式(启动)
      zdmsqd() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zdqdCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //定点视频
      dd() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        ddspCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //连续视频
      lx() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        lxspCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //一键返航
      yjfh() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        yjfhCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //自由模式速度设定
      zymslb(zymssdzd) {
        this.zymssdzd = zymssdzd;
      }, //手动模式(启动)
      sdmsqd() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        robotrunCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //手动模式前进
      sdmsqj() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        qjCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //手动模式后退
      sdmsht() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        htCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //电子地图
      getMap() {
        this.queryParams.plcid = localStorage.getItem("plcid");
        this.queryParams.robotid = localStorage.getItem("robot_config_id");
        if (
          typeof this.queryParams.robotid != "undefined" &&
          this.queryParams.robotid != null
        ) {
          getTrackMaprobot(this.queryParams).then((response) => {
            if (
              typeof response.data != "undefined" &&
              response.data != null &&
              response.data.dzdt.length > 0
            ) {
              this.result = response.data.dzdt;
              this.arrdata = [[]]; //初始化地图值
              if (
                typeof response.data.positionxy != "undefined" &&
                response.data.positionxy != "unxy"
              ) {
                let positionxy = response.data.positionxy.split(","); //xy坐标
                localStorage.removeItem("xposition"); //删除键值  机器人开始位置x坐标
                localStorage.removeItem("yposition"); //删除键值 机器人开始位置y坐标
                localStorage.removeItem("xjbh"); //删除键值 机器人开始位置y坐标
                localStorage.setItem("xposition", positionxy[0]); //存储值 机器人开始位置x坐标
                localStorage.setItem("yposition", positionxy[1]); //存储值 机器人开始位置y坐标
                localStorage.setItem("xjbh", response.data.xjbh); //存储值 巡检点编号
              }
              const result_length = this.result.length;
              for (let i = 0; i < result_length; i++) {
                //因为我在后台取出来的数据是一行的，字符串形式
                let dataArray = this.result[i].xyposition.split(",");
                //这句话是必须的，每次都要新建一个一维数组,不然会报错
                this.arrdata[i] = new Array();
                const data_length = dataArray.length;
                for (let j = 0; j < data_length; j++) {
                  this.arrdata[i][j] = dataArray[j];
                }
              } //电子地图、交替getMap
              if (this.count % 2 == 0)
                this.initEcharts1(
                  this.arrdata,
                  localStorage.getItem("xposition"),
                  localStorage.getItem("yposition"),
                  localStorage.getItem("xjbh"),
                  1
                ); //交替getMap
              else
                this.initEcharts1(
                  this.arrdata,
                  localStorage.getItem("xposition"),
                  localStorage.getItem("yposition"),
                  localStorage.getItem("xjbh"),
                  2
                );
              this.count += 1;
            } else {
              if (myChart != null) myChart.dispose(); //销毁echarts
              this.result = null;
            }
          });
        } else {
          if (myChart != null) myChart.dispose(); //销毁echarts
          this.result = null;
        }
      },
      /*电子轨道图方法*/
      initEcharts1(dtop, xposition, yposition, xjbh, fg) {
        if (this.$refs.chinaMapChart) {
          this.$nextTick(() => {
            const myChart = echarts.init(this.$refs.chinaMapChart)
            let option;
            //轨道地图数据
            const data = dtop;
            option = {
              tooltip: {
                trigger: 'item',
                formatter: (params) => {  // params就是数据，这里可以打印一下看看
                  // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
                  if (typeof params.data[0] == 'undefined') {
                    return ``
                  } else {
                    //return `${params.data[2]}</br>${params.marker}横坐标:${params.data[0]}</br>纵坐标:${params.data[1]}`
                    return `${typeof params.data[2] == 'undefined' ? 0 : params.data[2]}点位`
                  }
                }
              },
              title: {
                /* text: '机器人巡检轨迹图',*/
                left: 'center'
              },
              grid: {//底图四个方向调整
                top: '11%',
                bottom: '18%',
                left: '1%',
                right: '1%'
              },
              xAxis: {
                splitLine: { //网格线
                  show: false
                },
                type: 'value',
                axisLine: {
                  onZero: false,
                  show: false//隐藏y轴
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: false, //隐藏刻度值
                }
              },
              yAxis: {
                splitLine: { //网格线
                  show: false
                },
                type: 'value',
                axisLine: {
                  onZero: false,
                  show: false//隐藏y轴
                },
                axisTick: {
                  show: false,  //刻度线
                },
                axisLabel: {
                  show: false, //隐藏刻度值
                }
              },
              series: [
                {
                  label: {
                    color: '#cefc04',
                    show: true,
                    position: "top",
                    formatter: '{@value}',// 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
                    fontSize: 8,
                  },
                  id: 'a',
                  /* type: (this.picpath == null || this.picpath == '') ? 'line':'scatter',//scatter 散点，line 曲线*/
                  type: 'line',
                  smooth: true,
                  itemStyle: {
                    // 设置线条颜色
                    normal: {
                      color: {
                        colorStops: [{
                          offset: 0.5, color: '#0352b7' // 0% 处的颜色
                        }, {
                          offset: 1, color: '#0352b7' // 100% 处的颜色
                        }]
                      },
                      lineStyle: {
                        width: 4,//线条大小
                        type: 'solid'//可选值还有 dotted  solid
                      }
                    }
                  },
                  symbolSize: 12,//巡检点大小
                  symbol: 'image://' + point,//巡检点图标
                  data: data,
                  //  symbol: 'circle',
                  markPoint: {
                    label: {
                      color: '#2bf187',  // 文字颜色
                      // padding: [0, 0,-10, 0], // 可用padding调整图片内文字距离
                      show: true,
                      //formatter: '巡检机器人'// 自定义文字内容
                    },
                    //机器人大小
                    itemStyle: {
                      color: {
                        type: 'linear',
                        colorStops: [{
                          offset: 0, color: 'blue' // 0% 处的颜色
                        }, {
                          offset: 1, color: 'blue' // 100% 处的颜色
                        }]
                      }
                    },
                    //symbol: 'circle',
                    symbol: fg == 1 ? 'image://' + rbt : 'image://' + rbt1,
                    // 自定义图片作为标注展示
                    // symbolSize: [58, 38],  // 调整图片的长宽
                    // symbolOffset: [10, '-50%'],  // 调整标注图片的位移方向 大小
                    symbolSize: 16,//机器人大小
                    data: [{//1机器人移动坐标位置
                      xAxis: xposition,
                      yAxis: yposition,
                      value: xjbh,
                      fontSize: 9
                    } /*,{//2机器人移动坐标位置
                  xAxis:23000,
                  yAxis:21500,
                }*/],
                  }
                },
                // 闪烁点的重点是以下配置
                {
                  // 设置圆心点特效动画、大小
                  type: 'effectScatter', data: dtop,
                  symbolSize: 5,
                  coordinateSystem: 'cartesian2d',
                  // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
                  showEffectOn: 'render',
                  // 涟漪特效配置
                  rippleEffect: {
                    color: '#102cf1',
                    scale: 4,
                    // 波纹的绘制方式,可选'stroke'和'fill'
                    brushType: 'stroke'
                  },
                  //圆心点
                  hoverAnimation: true,
                  itemStyle: {
                    normal: {
                      color: '#0318a9',
                      shadowBlur: 80,
                      shadowColor: '#0656ec',
                    }
                  },
                  zlevel: 1
                }
              ], graphic: [
                {
                  type: 'image', // 图形元素类型
                  id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
                  right: 'center', // 根据父元素进行定位 （居中）
                  bottom: '0%', // 根据父元素进行定位 （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
                  z: 0,  // 层叠
                  bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
                  style: {
                    //  image: img, // 这里一定要注意、注意，必须是https开头的图片路径地址
                    width: 1060,
                    height: 420
                  }
                }
              ]
            }
            if (option && typeof option === 'object') {
              myChart.setOption(option);
            }
            window.addEventListener("resize", () => {
              if (myChart != null) myChart.resize();
            });//电子地图与背景图同比缩放
          })
        }
      },
      //电机转速
      echarts1(djzs) {
        if (this.$refs.gauges) {
          this.$nextTick(() => {
            myChart1 = echarts.init(this.$refs.gauges);
            myChart1.setOption({
              series: [
                {
                  radius: "100%",
                  center: ["50%", "50%"],
                  type: "gauge",
                  axisLine: {
                    lineStyle: {
                      width: 16,
                      color: [
                        [0.3, "#3e78f5"],
                        [0.7, "#9a54eb"],
                        [1, "#f37886"],
                      ],
                    },
                  },
                  pointer: {
                    width: 9,
                    itemStyle: {
                      color: "#3e78f5",
                    },
                  },
                  axisTick: {
                    distance: -19,
                    length: 11,
                    lineStyle: {
                      color: "#fff",
                      width: 1,
                    },
                  },
                  splitLine: {
                    distance: -19,
                    length: 13,
                    lineStyle: {
                      color: "#fff",
                      width: 2,
                    },
                  },
                  axisLabel: {
                    color: "#fff",
                    distance: 9,
                    fontSize: 6,
                  },
                  detail: {
                    // width:60,
                    // height:60,
                    fontSize: 10,
                    valueAnimation: true,
                    formatter: "{value} r/min",
                    color: "#fff",
                  },
                  data: [
                    {
                      value: djzs,
                      name: "电机转速",
                    },
                  ],
                  title: {
                    show: true,
                    fontSize: 10,
                    offsetCenter: ["0", "10%"],
                    color: "#fff",
                  },
                  max: 5000,
                  min: 0,
                },
              ],
            });
            window.addEventListener("resize", () => {
              if (myChart1 != null) myChart1.resize();
            }); //同比缩放
          });
        }
      }, //电机温度
      echarts2(djwd) {
        if (this.$refs.gauges2) {
          this.$nextTick(() => {
            myChart2 = echarts.init(this.$refs.gauges2);
            myChart2.setOption({
              series: [
                {
                  radius: "70%",
                  center: ["50%", "50%"],
                  type: "gauge",
                  splitNumber: 9,
                  axisLine: {
                    lineStyle: {
                      width: 10,
                      color: [[1, "#ddebf6"]],
                    },
                  },
                  pointer: {
                    show: false,
                    width: 5,
                    // itemStyle: {
                    //   color: '#3e78f5'
                    // }
                  },
                  axisTick: {
                    // show:false,
                    distance: -11,
                    length: 7,
                    lineStyle: {
                      color: "#a9a9a9",
                      width: 1,
                    },
                  },
                  splitLine: {
                    distance: -10,
                    length: 9,
                    lineStyle: {
                      color: "#a9a9a9",
                      width: 2,
                    },
                  },
                  axisLabel: {
                    color: "#fff",
                    distance: -22,
                    fontSize: 7,
                  },
                  detail: {
                    // width:60,
                    // height:60,
                    fontSize: 10,
                    valueAnimation: true,
                    formatter: "{value}°C",
                    color: "#daa666",
                  },
                  data: [
                    {
                      value: djwd,
                      name: "电机温度",
                    },
                  ],
                  title: {
                    show: true,
                    offsetCenter: ["0", "-20%"],
                    color: "#daa666",
                    fontSize: 10,
                  },
                  max: 360,
                  min: 0,
                },
              ],
            });
            window.addEventListener("resize", () => {
              if (myChart2 != null) myChart2.resize();
            }); //同比缩放
          });
        }
      }, //电池电量
      echarts3(dcdl) {
        if (this.$refs.gauges3) {
          this.$nextTick(() => {
            myChart3 = echarts.init(this.$refs.gauges3);
            myChart3.setOption({
              series: [
                {
                  name: "电量",
                  type: "gauge",
                  clockwise: true,
                  data: [
                    {
                      value: dcdl,
                      name: "电池电量",
                    },
                  ],
                  radius: "100%",
                  // 仪表盘半径
                  // startAngle: 208,
                  // endAngle: -28,
                  min: 0,
                  max: 100,
                  splitNumber: 10,
                  center: ["50%", "50%"],
                  axisLabel: {
                    // 大刻度标签。
                    show: true,
                    distance: 10,
                    color: "white",
                    fontSize: 8,
                    formatter: "{value}",
                  },
                  splitLine: {
                    length: 10,
                    // 分隔线长度
                    lineStyle: {
                      width: 2,
                      color: "#ffffff",
                    },
                  },
                  axisLine: {
                    // 仪表盘轴线(轮廓线)相关配置。
                    show: true,
                    lineStyle: {
                      // 仪表盘轴线样式。
                      opacity: 1,
                      width: 12,
                      // 表盘宽度
                      shadowBlur: 10,
                      color: [
                        // 仪表盘轴线颜色
                        [
                          1,
                          new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                              offset: 0,
                              color: "#00e4f0",
                            },
                            {
                              offset: 0.3,
                              color: "#00e4f0",
                            },
                            {
                              offset: 1,
                              color: "#00e4f0",
                            },
                          ]),
                        ],
                      ],
                    },
                  },
                  axisTick: {
                    // 小刻度相关
                    splitNumber: 5,
                    // 小刻度个数
                    show: true,
                  },
                  detail: {
                    // 仪表盘详情数据相关
                    color: "#5ab1ef",
                    fontSize: 10,
                    formatter: "{value}%",
                    offsetCenter: [0, "20"],
                  },
                  title: {
                    show: true,
                    offsetCenter: ["0", "-18%"],
                    color: "#b6cbea",
                    fontSize: 10,
                  },
                  itemStyle: {
                    // 指针样式
                    color: "#fff",
                  },
                  pointer: {
                    // 仪表盘指针。
                    show: true,
                    length: "70%",
                    width: 6,
                  },
                },
              ],
            });
            window.addEventListener("resize", () => {
              if (myChart3 != null) myChart3.resize();
            }); //同比缩放
          });
        }
      }, //水滴图
      drawLiquidfill(yq, jw, lhq, aq, xcsd, xcwd) {
        const option = {
          series: [
            {
              //name: '违规项',
              type: "liquidFill",
              radius: "90%",
              data: [jw / 100],
              label: {
                normal: {
                  formatter: jw.toFixed(1),
                  textStyle: {
                    color: "#b3d3fa",
                    fontSize: 9,
                  },
                },
              },
              color: ["#446bf5"],
              backgroundStyle: {
                color: "rgba(0,202,148,0.12)",
              },
              outline: {
                borderDistance: 1,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ade5f9",
                      },
                      {
                        offset: 1,
                        color: "#2e92e2",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#63b1e6",
                },
              },
              // amplitude: 0,
            },
          ],
        };
        myChart4 = echarts.init(document.getElementById("hygrometer"));
        myChart4.setOption(option);
        window.addEventListener("resize", () => {
          if (myChart4 != null) myChart4.resize();
        }); //同比缩放
        const optiona = {
          series: [
            {
              name: "违规项",
              type: "liquidFill",
              radius: "90%",
              // center: ['50%', '45%'],
              data: [yq / 100],
              label: {
                normal: {
                  formatter: yq.toFixed(1),
                  textStyle: {
                    color: "#b3d3fa",
                    fontSize: 9,
                  },
                },
              },
              color: ["#30b763"],
              backgroundStyle: {
                color: "rgba(0,202,148,0.12)",
              },
              outline: {
                borderDistance: 1,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#86c0b7",
                      },
                      {
                        offset: 1,
                        color: "#51cbae",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#63b1e6",
                },
              },
            },
          ],
        };
        myChart5 = echarts.init(document.getElementById("hygrometer2"));
        myChart5.setOption(optiona);
        window.addEventListener("resize", () => {
          if (myChart5 != null) myChart5.resize();
        }); //同比缩放
        const optionb = {
          series: [
            {
              name: "违规项",
              type: "liquidFill",
              radius: "90%",
              // center: ['50%', '45%'],
              data: [lhq / 100],
              label: {
                normal: {
                  formatter: lhq.toFixed(1),
                  textStyle: {
                    color: "#b3d3fa",
                    fontSize: 9,
                  },
                },
              },
              color: ["#ab55e7"],
              backgroundStyle: {
                color: "rgba(0,202,148,0.12)",
              },
              outline: {
                borderDistance: 1,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#bd96f0",
                      },
                      {
                        offset: 1,
                        color: "#8e2ad1",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#1f1997",
                },
              },
              // amplitude: 0,
            },
          ],
        };
        myChart6 = echarts.init(document.getElementById("hygrometer3"));
        myChart6.setOption(optionb);
        window.addEventListener("resize", () => {
          if (myChart6 != null) myChart6.resize();
        }); //同比缩放
        const optionc = {
          series: [
            {
              name: "违规项",
              type: "liquidFill",
              radius: "90%",
              // center: ['50%', '45%'],
              data: [xcwd / 100],
              label: {
                normal: {
                  formatter: xcwd.toFixed(1),
                  textStyle: {
                    color: "#b3d3fa",
                    fontSize: 9,
                  },
                },
              },
              color: ["#6a6d2b"],
              backgroundStyle: {
                color: "rgba(0,202,148,0.12)",
              },
              outline: {
                borderDistance: 1,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#b8bf88",
                      },
                      {
                        offset: 1,
                        color: "#b2c151",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#99a82f",
                },
              },
              // amplitude: 0,
            },
          ],
        };
        myChart7 = echarts.init(document.getElementById("hygrometer4"));
        myChart7.setOption(optionc);
        window.addEventListener("resize", () => {
          if (myChart7 != null) myChart7.resize();
        }); //同比缩放
        const optiond = {
          series: [
            {
              name: "违规项",
              type: "liquidFill",
              radius: "90%",
              // center: ['50%', '45%'],
              data: [xcsd / 100],
              label: {
                normal: {
                  formatter: xcsd.toFixed(1),
                  textStyle: {
                    color: "#b3d3fa",
                    fontSize: 9,
                  },
                },
              },
              color: ["#13a496"],
              backgroundStyle: {
                color: "rgba(0,202,148,0.12)",
              },
              outline: {
                borderDistance: 1,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#7bbdba",
                      },
                      {
                        offset: 1,
                        color: "#3bc4c0",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#63b1e6",
                },
              },
              // amplitude: 0,
            },
          ],
        };
        myChart8 = echarts.init(document.getElementById("hygrometer5"));
        myChart8.setOption(optiond);
        window.addEventListener("resize", () => {
          if (myChart8 != null) myChart8.resize();
        }); //同比缩放
        const optione = {
          series: [
            {
              name: "违规项",
              type: "liquidFill",
              radius: "90%",
              // center: ['50%', '45%'],
              data: [aq / 100],
              label: {
                normal: {
                  formatter: aq.toFixed(1),
                  textStyle: {
                    color: "#b3d3fa",
                    fontSize: 9,
                  },
                },
              },
              color: ["#6073dd"],
              backgroundStyle: {
                color: "rgba(0,202,148,0.12)",
              },
              outline: {
                borderDistance: 1,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#503bbd",
                      },
                      {
                        offset: 1,
                        color: "#7d80ad",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#63b1e6",
                },
              },
              // amplitude: 0,
            },
          ],
        };
        myChart9 = echarts.init(document.getElementById("hygrometer6"));
        myChart9.setOption(optione);
        window.addEventListener("resize", () => {
          if (myChart9 != null) myChart9.resize();
        }); //同比缩放
      },
      // 环境参数检测 柱状图
      initEcharts() {
        // 基本柱状图
        const option = {
          //统计色块legend
          legend: {
            show: true,
            //top:'5%',
            left: "74%",
            bottom: "20%",
            itemGap: 8,
            orient: "vertical",
            textStyle: {
              color: "#b1d2fa",
              fontSize: 13,
            },
            formatter: function (name) {
              const list = {
                test_1: "氧气",
                test_2: "甲烷",
                test_3: "硫化氢",
                test_4: "氨气",
              };
              return list[name];
            },
          },
          barWidth: 20,
          xAxis: {
            axisLine: {
              show: true, // 显示坐标轴线
              lineStyle: {
                color: "#042881", //x轴的颜色
              },
            },
            type: "category",
            data: ["氧气", "甲烷", "硫化氢", "氨气"],
            splitNumber: 5,
            // show: false,
            name:
              localStorage.getItem("robot_name") == null
                ? ""
                : localStorage.getItem("robot_name"),
            nameLocation: "middle",
            nameTextStyle: {
              color: "#c2e4fd",
              fontSize: 13,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false, // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
              interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
              hideOverlap: true, // 隐藏互相遮挡的文本标签
            },
            splitLine: {
              // show: true,
              interval: 1,
            },
          },
          yAxis: {
            axisLine: {
              show: true, // 显示坐标轴线
              lineStyle: {
                color: "#042881", //y轴的颜色
              },
            },
            type: "value",
            // data: this.xData,

            axisLabel: {
              textStyle: {
                color: "#5DCBFF",
                fontSize: "10",
              },
            },
            splitNumber: 5,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              interval: 0,
            },
            // show:false
          },
          grid: {
            top: "7%",
            bottom: "22%",
            left: "13%",
            right: "20%",
            // show:false,
          },
          series: [
            {
              // markLine: {
              //   data: [{ type: 'average', name: 'Avg' }],
              // },
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#b8d6f8",
                },
              },
              barGap: "-100%",
              name: "test_1",
              data: [this.yq == "无" ? 0 : this.yq, null, null, null],
              type: "bar",
              stack: "Mon",
              showBackground: true,
              itemStyle: {
                color: {
                  type: "linear",
                  // x=0,y=1,柱子的颜色在垂直方向渐变
                  x: 0,
                  y: 1,
                  colorStops: [
                    // 0%处的颜色
                    {
                      offset: 1,
                      color: "#28d6fd",
                    },
                    // 50%处的颜色
                    {
                      offset: 0.5,
                      color: "#259edf",
                    },
                    // 100%处的颜色
                    {
                      offset: 0,
                      color: "#2482d0",
                    },
                  ],
                  // global: false // 缺省为 false
                },
              },
            },
            {
              // markLine: {
              //   data: [{ type: 'average', name: 'Avg' }]
              // },
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#b8d6f8",
                },
              },
              barGap: "-100%",
              name: "test_2",
              data: [null, this.jw == "无" ? 0 : this.jw, null, null],
              type: "bar",
              showBackground: true,
              // showBackground: true,
              // backgroundStyle: {
              //   color: 'rgba(180, 180, 180, 0.2)'
              // },
              itemStyle: {
                color: {
                  type: "linear",
                  // x=0,y=1,柱子的颜色在垂直方向渐变
                  x: 0,
                  y: 1,
                  colorStops: [
                    // 0%处的颜色
                    {
                      offset: 1,
                      color: "#61E070",
                    },
                    // 50%处的颜色
                    {
                      offset: 0.5,
                      color: "#46ab44",
                    },
                    // 100%处的颜色
                    {
                      offset: 0,
                      color: "#2E7E1F",
                    },
                  ],
                  // global: false // 缺省为 false
                },
              },
            },
            {
              // markLine: {
              //   data: [{ type: 'average', name: 'Avg' }]
              // },
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#b8d6f8",
                },
              },
              barGap: "-100%",
              name: "test_3",
              data: [null, null, this.lhq == "无" ? 0 : this.lhq, null],
              type: "bar",
              showBackground: true,
              // showBackground: true,
              // backgroundStyle: {
              //   color: 'rgba(180, 180, 180, 0.2)'
              // },
              itemStyle: {
                color: {
                  type: "linear",
                  // x=0,y=1,柱子的颜色在垂直方向渐变
                  x: 0,
                  y: 1,
                  colorStops: [
                    // 0%处的颜色
                    {
                      offset: 1,
                      color: "#645BD6",
                    },
                    // 50%处的颜色
                    {
                      offset: 0.5,
                      color: "#4c4ab7",
                    },
                    // 100%处的颜色
                    {
                      offset: 0,
                      color: "#222B82",
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            {
              /* markLine: {
               data: [{ type: 'average', name: 'Avg' }]
             },*/
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#b8d6f8",
                },
              },
              // showBackground: true,
              barGap: "-100%",
              // barWidth: "50",
              name: "test_4",
              data: [null, null, null, this.aq == "无" ? 0 : this.aq],
              type: "bar",
              showBackground: true,
              itemStyle: {
                color: {
                  type: "linear",
                  // x=0,y=1,柱子的颜色在垂直方向渐变
                  x: 0,
                  y: 1,
                  colorStops: [
                    // 0%处的颜色
                    {
                      offset: 1,
                      color: "#3cf9cb",
                    },
                    // 50%处的颜色
                    {
                      offset: 0.5,
                      color: "#28c6a9",
                    },
                    // 100%处的颜色
                    {
                      offset: 0,
                      color: "#128e83",
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          ],
        };
        myChart10 = echarts.init(document.getElementById("mychart"));
        myChart10.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          if (myChart10 != null) myChart10.resize();
        });
      }, //巡检列表滚动逻辑
      infinitScroll() {
        const tableWrapper = this.$refs.table.$el.querySelector(
          ".el-table__body-wrapper"
        );
        // 设置滚动到底部
        tableWrapper.scrollTop = tableWrapper.scrollHeight;
        // 拿到表格挂载后的真实DOM
        const table = this.$refs.table;
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper;
        start();
        divData.onmouseover = function () {
          clearInterval(t);
        }; //鼠标移入，停止滚动
        divData.onmouseout = function () {
          start();
        }; //鼠标移出，继续滚动
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        let t;
        // let temp = document.getElementsByClassName('el-table__row')
        function start() {
          // 数据少于表格高度停止滚动
          if (divData.clientHeight >= divData.scrollHeight) {
            return;
          }
          t = setInterval(() => {
            // 元素自增距离顶部1像素
            divData.scrollTop += 2;
            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
            if (
              divData.clientHeight + divData.scrollTop ==
              divData.scrollHeight
            ) {
              // 重置table距离顶部距离
              divData.scrollTop = 0;
            }
          }, 50);
        }
        start();
      }, //机器人模式设置
      jqrmsF(jqrms) {
        this.queryparms3.valu = jqrms;
        console.log("机器人模式设置" + this.queryparms3.valu);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          msszCmd(this.queryparms3).then((response) => {
            if (typeof response != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("机器人模式设置不能为空");
        }
      }, //机器人自由模式设置
      jqrzymsF(jqrms) {
        this.queryparms3.valu = jqrms;
        console.log("机器人模式设置" + this.queryparms3.valu);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          zymsmsszCmd(this.queryparms3).then((response) => {
            if (typeof response != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("机器人模式设置不能为空");
        }
      }, //机器人暂停
      zt() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        robotstopCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      }, //自动模式速度设置
      zdmsdsd() {
        this.queryparms3.valu = this.zdmssdzd;
        console.log("自动模式速度设置" + this.zdmssdzd);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          xjsdCmd(this.queryparms3).then((response) => {
            if (typeof response != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("自动模式速度设置不能为空");
        }
      }, //自由模式速度设置
      zymsdsd() {
        this.queryparms3.valu = this.zymssdzd;
        console.log("自由模式速度设置" + this.zymssdzd);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          jqrsdzymsCmd(this.queryparms3).then((response) => {
            if (typeof response != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("自由模式速度设置不能为空");
        }
      },
    },
    computed: {
      //滚动播报
      classOption() {
        return {
          step: 0.6, // 数值越大速度滚动越快
          limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 530, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
          autoPlay: true,
        };
      },
    },
    beforeDestroy() {
      //页面改变销毁定时器
      this.playerStop()//停止

      if (myChart != null) {
        myChart.clear();
        myChart = null;
      }
      if (myChart1 != null) {
        myChart1.clear();
        myChart1 = null;
      }
      if (myChart2 != null) {
        myChart2.clear();
        myChart2 = null;
      }
      if (myChart3 != null) {
        myChart3.clear();
        myChart3 = null;
      }
      if (myChart4 != null) {
        myChart4.clear();
        myChart4 = null;
      }
      if (myChart5 != null) {
        myChart5.clear();
        myChart5 = null;
      }
      if (myChart6 != null) {
        myChart6.clear();
        myChart6 = null;
      }
      if (myChart7 != null) {
        myChart7.clear();
        myChart7 = null;
      }
      if (myChart8 != null) {
        myChart8.clear();
        myChart8 = null;
      }
      if (myChart9 != null) {
        myChart9.clear();
        myChart9 = null;
      }
      if (myChart10 != null) {
        myChart10.clear();
        myChart10 = null;
      }
      if (this.timer) {
        clearInterval(this.timer);
      }
      if (this.timer1) {
        clearInterval(this.timer1);
      }
      if (this.timer2) {
        clearInterval(this.timer2);
      }
    },
    enter() {
      this.isDologin = true;
    },
    leave() {
      this.isDologin = false;
    },
  };
</script>
<style>
  .el-input.el-input--suffix .el-input__inner {
    background: transparent !important;
  }
</style>
<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }

  //去除按钮自带的
  .el-button+.el-button {
    margin-left: 0px;
  }

  //左边按钮
  .el-icon-d-arrow-right {
    font-size: 22px;
  }

  //右边按钮
  .el-icon-d-arrow-left {
    font-size: 22px;
  }

  //抽屉
  ::v-deep .el-drawer.rtl {
    background-color: #0e2356;
  }

  ::v-deep .el-drawer.ltr {
    background-color: #0e2356;
  }

  ::v-deep .el-drawer__container {
    background-color: transparent;
    overflow: auto;
  }

  //左边抽屉开始............................
  .PLCpanel {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    background: #0e2356;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .PLCpanel-p1 {
    width: 340px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;
  }

  .PLCpanel-p1>p {
    width: 89px;
    height: 28px;
    font-size: 23px;
    font-family: "PangMenZhengDao";
    font-weight: 400;
    color: #5dcbff;
  }

  .PLCpanel-para {
    width: 340px;
    height: 50px;
    display: flex;
    //justify-content: left;
    position: relative;
    left: -72px;
    //margin:0 0 0 -30px;
    margin-bottom: 4%;
  }

  .PLCpanel-parap1 {
    width: 89px;
    height: 22px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ededed;
    position: absolute;
    left: 15%;
    top: 10px;
    transform: translateY(-10%);
  }

  .PLCpanel-parap2 {
    position: absolute;
    top: 36px;
    left: 17%;
    transform: translateY(-20%);
  }

  ::v-deep.PLCpanel-parap3 {
    position: absolute;
    top: 20px;
    left: 20%;
    transform: translateX(100%) translateY(-30%);

    .el-input--suffix,
    .el-input__inner {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: transparent;
      border: 2px solid #54619d;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      background: #17255d;
      color: #fff !important;
      height: 30px;
      border-radius: 10px;
      width: 130px;
    }

    //图标
    .el-select__caret {
      margin-left: -40px;
    }
  }

  ::v-deep.el-button.el-button--primary {
    background: #01052b !important;
  }

  .PLCpane2 {
    width: 340px;
    height: 50px;
    font-size: 12px;
    color: #ededed;
    font-family: Source Han Sans CN;
    display: flex;
    margin-left: -15px;
    justify-content: left;
    margin-bottom: 1%;
  }

  .PLCpane2-left {
    //margin: 0 20px 0 0;
    width: 150px;
    display: flex;
    justify-content: left;
    align-items: center;

    :nth-child(1) {
      width: 100px;
      margin-right: 4px;
    }

    :nth-child(2) {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1.5px solid #54619d;
      border-radius: 4px;
    }
  }

  .PLCpane3 {
    width: 340px;
    height: 50px;
    font-size: 12px;
    color: #ededed;
    font-family: Source Han Sans CN;
    display: flex;
    margin-left: -15px;
    justify-content: left;
  }

  .PLCpane3-left {
    width: 150px;
    margin-top: 10px;
    display: flex;
    justify-content: left;
    align-items: center;

    :nth-child(1) {
      width: 100px;
      margin-right: 4px;
    }

    :nth-child(2) {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1.5px solid #54619d;
      border-radius: 4px;
    }
  }

  .operation {
    width: 94%;
    height: 55%;
    margin-top: 14px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: #0e2356;
  }

  .operation1 {
    width: 200px;
    height: 40px;
    position: relative;
  }

  .operation-p1 {
    font-size: 12px;
    color: #ededed;
    font-family: Source Han Sans CN;
    position: absolute;
    left: 20px;
    top: 8px;
  }

  .operation-p2 {
    position: absolute;
    left: 28.5px;
    top: 30px;
    margin-top: 5px;
  }

  .operation2 {
    width: 80px;
    display: flex;
    margin-top: 10px;
    margin-left: 28.5px;
  }

  .operation2>p {
    font-size: 14px;
    color: #ededed;
    font-family: Source Han Sans CN;
  }

  .operation3 {
    width: 180px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    //margin-bottom: 20px;
    margin-top: 10px;
    //background-color: #2ec7a1;
  }

  .operation3-1 {
    width: 100px;
    height: 30px;
    background: linear-gradient(0deg, #0e2356, #1b2d67);
    border: 2px solid #2b5b9b;
    border-radius: 5px;
    margin-bottom: 15px;
    //margin-left: 22%;
  }

  .operation3-2 {
    width: 100px;
    height: 30px;
    background: linear-gradient(0deg, #4c0820, #0e2356);
    border: 2px solid #942028;
    border-radius: 5px;
  }

  .operation4 {
    width: 120px;
    height: 100px;
    display: flex;
    margin-top: 10px;
    //background-color: #e6f062;
  }

  .operation4-1 {
    width: 100px;
    height: 30px;
    margin-top: 10px;
    background: linear-gradient(0deg, #0e2356, #065d70);
    border: 2px solid #108b8f;
    border-radius: 5px;
  }

  //左边抽屉结束..............................

  //右边抽屉开始.............................
  .right-top {
    width: 94%;
    height: 55%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #0e2356;
  }

  .right-topTitle {
    width: 340px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 7px;
  }

  .right-topTitle>p {
    width: 120px;
    height: 28px;
    font-size: 20px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5dcbff;
  }

  .Speed-dial {
    width: 94%;
    height: 65px;
    margin-left: 7px;
    margin-bottom: 75px;
    // margin-top:-10px;
    //background-color: cadetblue;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .right-mode {
    width: 360px;
    height: 50px;
    margin-bottom: 10px;
    margin-left: 7px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .mode-box {
    width: 60px;
    height: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .mode-box :nth-child(1) {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ededed;
    margin-bottom: 2px;
  }

  .mode-box :nth-child(2) {
    width: 60px;
    height: 25px;
    text-align: center;
    border: 2px solid #54619d;
    border-radius: 10px;
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Mode-selection {
    width: 360px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;
    margin-left: 7px;
  }

  .Mode-selection>p {
    width: 96px;
    height: 24px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ededed;
  }

  .Operation-button {
    width: 360px;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 7px;
  }

  .Operation-buttonBox {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .Operation-buttonBox :nth-child(1) {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(68deg, #3040f4, #3f79f4);
    margin-bottom: 5px;
    border-width: 0px;
  }

  .Operation-buttonBox :nth-child(2) {
    width: 60px;
    height: 13px;
    text-align: center;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ededed;
  }

  //手动模式
  .right-bottom1 {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    padding-top: 10px;
    background: #0e2356;
  }

  .right-bottomTitle {
    height: 30px;
  }

  .right-bottomTitle p:nth-child(1) {
    width: 95px;
    height: 26px;
    font-size: 12px;
    margin-left: 30px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ededed;
  }

  .right-bottomTitle p:nth-child(2) {
    width: 72px;
    height: 2px;
    background: #4691ff;
    border-radius: 2px;
    margin-left: 36px;
    margin-top: 3px;
  }

  //自动模式
  .right-bottom2 {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    padding-top: 10px;
    background: #0e2356;

    .right-bottomTitle {
      width: 98%;
      height: 15%;
      margin-top: 1%;

      //background-color: #00FF00;
      >p {
        width: 95px;
        height: 20px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ededed;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691ff;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 85%;

      .right-bottomBox1 {
        width: 98%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;

        >span {
          display: block;
          //margin-top: 5px;
          margin-left: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        .btn {
          width: 100px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #1b2d67);
          border: 2px solid #2b5b9b;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }
      }

      .right-bottomBox2 {
        width: 100%;
        height: 28%;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn1 {
          width: 50px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #0d817a);
          border: 2px solid #2ec7a1;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }

        .btn2 {
          width: 50px;
          height: 30px;
          margin-left: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #337f17);
          border: 2px solid #3ca813;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }
      }

      .right-bottomBox3 {
        display: flex;
        align-items: center;
        justify-content: center;

        .btn1 {
          width: 50px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #1b2d67);
          border: 2px solid #2b5b9b;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }

        .btn2 {
          width: 50px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #065d70);
          border: 2px solid #108b8f;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
          margin-left: 10px;
        }

        .btn3 {
          width: 50px;
          height: 30px;
          margin-left: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #4c0820, #0e2356);
          border: 2px solid #942028;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }
      }
    }
  }

  //一键返航
  .right-bottom3 {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    padding-top: 10px;
    background: #0e2356;

    .right-bottomTitle {
      width: 98%;
      height: 20%;
      margin-top: 1%;

      //background-color: #00FF00;
      >p {
        width: 95px;
        height: 26px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ededed;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691ff;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: flex-end;

      //background-color: #0264bf;
      .btn {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #1b2d67);
        border: 2px solid #2b5b9b;
        border-radius: 4px;
        font-size: 12px;
        //margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }
    }
  }

  //自由模式
  .right-bottom4 {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    padding-top: 10px;
    background: #0e2356;

    .right-bottomTitle {
      width: 98%;
      height: 20%;
      margin-top: 1%;

      //background-color: #00FF00;
      >p {
        width: 95px;
        height: 26px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ededed;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691ff;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 85%;

      //background-color: #2ec7a1;
      .right-bottomBox1 {
        width: 90%;
        height: 30%;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        //background-color: hotpink;
        >span {
          display: block;
          //margin-top: 5px;
          margin-left: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        .btn {
          width: 80px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #1b2d67);
          border: 2px solid #2b5b9b;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }
      }

      .right-bottomBox2 {
        width: 100%;
        height: 28%;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn1 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #0d817a);
          border: 2px solid #2ec7a1;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }

        .btn2 {
          width: 50px;
          height: 25px;
          margin-left: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #337f17);
          border: 2px solid #3ca813;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }
      }

      .right-bottomBox3 {
        display: flex;
        align-items: center;
        justify-content: center;

        .btn1 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #1b2d67);
          border: 2px solid #2b5b9b;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }

        .btn2 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0e2356, #065d70);
          border: 2px solid #108b8f;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
          margin-left: 10px;
        }

        .btn3 {
          width: 50px;
          height: 25px;
          margin-left: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #4c0820, #0e2356);
          border: 2px solid #942028;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #c1c1c1;
        }
      }
    }
  }

  .Target-position {
    width: 360px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 15px;
  }

  .Target-position1 {
    width: 130px;
    height: 34px;
    line-height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Target-position1 :nth-child(1) {
    width: 80px;
    height: 30px;
    text-align: center;
    background: #17255d;
    border: 2px solid #54619d;
    border-radius: 10px;
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #c1c1c1;
  }

  .Target-position1 :nth-child(2) {
    margin-left: 3px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ededed;
  }

  .Target-position2 {
    width: 130px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Target-position2>p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 40px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ededed;
    background-image: url(../../components/images/bottom.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .Speed-setting {
    width: 360px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .Speed-setting1 {
    width: 140px;
    height: 34px;
    line-height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Speed-setting1>p {
    margin-left: 3px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ededed;
  }

  .right-bottomBox4 {
    margin-left: 3%;
    width: 40%;
    height: 12%;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;

    //background-color: #d4f283;
    .btn1 {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(0deg, #0e2356, #0d817a);
      border: 2px solid #2ec7a1;
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #c1c1c1;
    }

    .btn2 {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(0deg, #0e2356, #337f17);
      border: 2px solid #3ca813;
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #c1c1c1;
    }
  }

  .Operation-Btn {
    width: 360px;
    height: 100px;
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
  }

  .Operation-Btn1 {
    width: 70px;
    height: 30px;
    border: none;
    border: 2px solid #2b5b9b;
    border-radius: 5px;
    background: linear-gradient(0deg, #0e2356, #1b2d67);
  }

  .Operation-Btn2 {
    width: 70px;
    height: 30px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(0deg, #0e2356, #065d70);
    border: 2px solid #108b8f;
  }

  .Operation-Btn3 {
    width: 70px;
    height: 30px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(0deg, #4c0820, #0e2356);
    border: 2px solid #942028;
  }

  //右边抽屉结束..........................................
  //首页部分...............................................
  .app-container {
    width: 100%;
    height: calc(100vh - 35px);
    background-color: blanchedalmond;
    background: url("../../components/images/beijin.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-size: cover;
  }

  //头部开始
  .dataScreen-head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    background: url("../../components/images/head.png") no-repeat;
    background-size: 100% 100%;
  }

  .dataScreen-title {
    width: 50%;
    height: 100%;
    //background-color: #34EFBD;
  }

  .dataScreen-title>P {
    letter-spacing: 4px;
    text-align: center;
    font-size: 35px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-style: italic;
    color: #ffffff;
    background: linear-gradient(0deg, #74c5f4 0%, #f3f6f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  //头部结束....................................................
  //内容开始
  .dataScreen-contner {
    width: 100%;
    height: 100%;
    display: flex;
  }

  //左边内容开始
  .dataScreen-left {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background-color: aquamarine;
  }

  //机器人列表...............................
  .dataScreen-robot {
    width: 92%;
    height: 30%;
    margin-bottom: 6px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    //background-color: coral;
  }

  .dataScreen-rotitle {
    width: 93%;
    height: 36px;
    line-height: 36px;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: -20px;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 20px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5dcbff;
    }
  }

  .dataScreen-rolist {
    width: 98%;
    height: 85%;
  }

  ::v-deep .el-table {
    background-color: transparent !important;
  }

  // 机器人表格相关
  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      // 整个滚动条
      width: 20px; // 纵向滚动条的宽度
      background: rgba(71, 103, 182, 0.3);
      border: none;
    }

    &::-webkit-scrollbar-track {
      // 滚动条轨道
      border: none;
    }
  }

  .el-table th.gutter {
    display: none;
    width: 0;
  }

  .el-table colgroup col[name="gutter"] {
    display: none;
    width: 0;
  }

  .el-table::before {
    height: 0px;
  }

  .el-table__body {
    width: 100%;
  }

  /*滚动条的宽度*/
  .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    display: none;
  }

  .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    display: block;
  }

  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
  }

  // /* 表格内背景颜色 */
  ::v-deep .el-table th,
  ::v-deep .el-table tr {
    padding: 0;
    height: 30px;
  }

  ::v-deep .el-table thead {
    background-image: url(../../components/images/liebiao.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 99;
  }

  //::v-deep .el-table__row{
  //background-image: url(../../components/images/liebiao1.png);
  //background-repeat: no-repeat;
  //background-size: 100% 100%;
  //}

  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent;
    border-bottom: 1px solid rgba(32, 32, 32, 0.854);
    border-image: linear-gradient(rgb(26, 37, 95), rgb(20, 24, 85)) 20 20;
  }

  // 移入变色
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #0c2d50c3;
  }

  //电器参数.......................................
  .dataScreen-electrical {
    width: 92%;
    height: 30%;
    //margin-bottom: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //background-color: blueviolet;
  }

  .dataScreen-eltitle {
    width: 92%;
    height: 36px;
    line-height: 36px;
    /* margin-left: -20px;*/
    display: flex;
    //justify-content: space-between;
    margin-top: 1%;
    margin-bottom: 1%;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    //background-color: #3CA813;
    p {
      width: 34%;
      height: 30px;
      margin-left: 4%;
      font-size: 20px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5dcbff;
      // background-color: #34EFBD;
    }
  }

  .dataScreen-ellist {
    width: 90%;
    height: 80%;

    // background-color: crimson;
    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: rgba(218, 216, 216, 0.851);
      font-size: 13px;
      display: flex;
      //justify-content: center;
      align-items: center;
      // line-height: 50px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      border-bottom: 1px solid rgba(32, 32, 32, 0.854);
      // border-image: -webkit-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
      // border-image: -moz-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
      // border-image: -o-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
      border-image: linear-gradient(rgb(26, 37, 95), rgb(20, 24, 85)) 20 20;
      height: 33px;
      margin-left: 10px;
    }
  }

  .dataScreen-ellist::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
  }

  ::v-deep .el-input.el-input--suffix {

    // 2.修改背景颜色、字体颜色、边框、宽高
    .el-input__inner {
      background-color: transparent;
      border: none;
      color: #5bc8fc;
      height: 30px;
      width: 140px;
    }

    // 符号的位置会错乱，进行修正（水平）
    .el-input__suffix-inner {
      position: absolute;
    }
  }

  //设备运行参数.............................
  .dataScreen-equipment {
    width: 92%;
    height: 31%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background-color: cadetblue;
  }

  .dataScreen-eqtitle {
    width: 92%;
    height: 36px;
    line-height: 36px;
    margin-top: 1%;
    margin-bottom: 1%;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 20px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5dcbff;
    }
  }

  .dataScreen-eqlist {
    width: 93%;
    height: 80%;
    //padding-left: 20px;
  }

  ::v-deep.el-progress-bar__inner {
    background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
    // background-image: linear-gradient(90deg,#252799 100%,#2887b3 50% #27c9de 0%);  // 给进度条加上渐变色
    // background: linear-gradient(to right, #252799, #2887b3, #27c9de 70px);
    // background: linear-gradient(to right, red, blue 70px);
    // stroke-linecap:butt
  }

  .dataScreen-eqlist::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
  }

  //左边结束...................................................................

  //中间内容开始
  .dataScreen-center {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  //告警数据.................................
  .dataScreen-alarm {
    width: 98%;
    height: 36px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    background-image: url(../../components/images/alarm.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .dataScreen-alaimg>img {
    margin-left: 10px;
    margin-top: 5px;
  }

  #box {
    width: 360px;
    height: 32px;
    overflow: hidden;
    padding-left: 30px;
    // border: 1px solid black;
  }

  .anim {
    transition: all 0.5s;
    margin-top: -30px;
  }

  #con1 li {
    list-style: none;
    line-height: 30px;
    height: 30px;
  }

  .dataScreen-alatext {
    width: 90%;
    height: 80%;
    margin-left: 2%;
    /* margin-top: 8px;*/
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffd200;

    //background-color: #34EFBD;
    #box {
      width: 98%;
    }
  }

  //监控视频区.................................
  .dataScreen-video {
    width: 98%;
    height: 55%;
    background-image: url(../../components/images/border.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  // 摄像头图标
  .dataScreen-videoimg {
    width: 80%;
    height: 6%;

    //background-color: rgb(244, 189, 170);
    img {
      margin-left: 2%;
      margin-top: 1%;
      height: 80%;
    }
  }

  //监控画面
  .dataScreen-videoBox {
    width: 100%;
    height: 92%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dataScreen-videoIcon {
    width: 49%;
    height: 99%;
    border: 1px solid #4689e5;
    background-color: #040404;
    background-image: url(../../components/images/jiankong.png);
    background-repeat: no-repeat;
    background-position: center center;

    //background-color: aquamarine;
    img {
      width: 30%;
      height: 40%;
      margin: 25% 30%;
    }
  }

  //轨道部分
  .dataScreen-track {
    width: 98%;
    height: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .dataScreen-trackTop {
    width: 95%;
    height: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../../components/images/color.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .dataScreen-trackIcon1 {
    display: flex;
    width: 108px;
    height: 100%;
    //background-color: #2ec7a1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dataScreen-trackIcon1>img {
    width: 16px;
    height: 16px;
  }

  .dataScreen-trackIcon1>p {
    margin-left: 6px;
    width: 41px;
    height: 13px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .dataScreen-trackIcon2 {
    width: 144px;
    height: 100%;
    //background-color: #FFD200;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dataScreen-trackIcon2>img {
    width: 16px;
    height: 12px;
  }

  .dataScreen-trackIcon2>p {
    width: 41px;
    height: 13px;
    margin-left: 6px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .dataScreen-trackIcon3 {
    width: 120px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: cadetblue;
  }

  .dataScreen-trackIcon3>p {
    width: 140px;
    height: 13px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    margin-left: 6px;
  }

  .dataScreen-trackIcon3 {
    width: 120px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: cadetblue;
  }

  .dataScreen-trackIcon3>p {
    width: 140px;
    height: 13px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    margin-left: 6px;
  }

  .dataScreen-trackIcon4 {
    width: 114px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: cadetblue;
  }

  .dataScreen-trackIcon4>p {
    width: 140px;
    height: 13px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    margin-left: 6px;
  }

  .dataScreen-trackIcon5 {
    width: 114px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: cadetblue;
  }

  .dataScreen-trackIcon5>p {
    width: 140px;
    height: 13px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    margin-left: 6px;
  }

  .dataScreen-trackIcon6 {
    width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: cadetblue;
  }

  .dataScreen-trackIcon6>p {
    width: 140px;
    height: 13px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    margin-left: 6px;
  }

  .dataScreen-trackBtom {
    width: 90%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: rgb(199, 152, 245);
  }

  .dataScreen-trackBtom1 {
    width: 90%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #5dcbff;
    font-size: 20px;
    letter-spacing: 2px;
  }

  //中间部分结束....................................................................

  //右边内容开始............................................
  .dataScreen-right {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //margin-top: 10px;
    //background-color: cornflowerblue;
  }

  //图标..............................
  .dataScreen-rightIcon {
    width: 96%;
    height: 10%;
    display: flex;
    justify-content: space-around;
    //background-color: rgb(223, 248, 113);
  }

  .dataScreen-rightIcon1 {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //margin-top: -8px;

    img {
      width: 78%;
      height: 56px;
    }

    .pname {
      display: block;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      margin-top: -12px;
      color: #ffffff;
    }

    .p1 {
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #24ffc3;
    }

    .p2 {
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #a4ef34;
    }

    .p3 {
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #f32424;
    }
  }

  //巡检列表..................................
  .dataScreen-inspection {
    width: 96%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background-color: lightblue;
  }

  .dataScreen-intitle {
    width: 90%;
    height: 36px;
    line-height: 36px;
    margin-top: 1%;
    margin-bottom: 1%;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 22px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5dcbff;
    }
  }

  .dataScreen-inlist {
    width: 90%;
    height: 84%;
  }

  //环境参数.............................................
  .dataScreen-parameter {
    width: 96%;
    height: 28%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //background-color: cyan;
  }

  .dataScreen-paratitle {
    width: 90%;
    height: 36px;
    line-height: 36px;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 22px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5dcbff;
    }
  }

  .dataScreen-paraBox {
    width: 99%;
    height: 85%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .concentration1 {
    width: 33%;
    height: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;

    div {
      width: 70%;
      height: 70%;
    }

    p {
      margin-top: 5px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }
  }

  //环境参数检测..................................
  .dataScreen-detection {
    width: 96%;
    height: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //background-color: rgb(237, 249, 167);
  }

  .dataScreen-deTitle {
    width: 90%;
    height: 36px;
    line-height: 36px;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 22px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5dcbff;
    }
  }

  .echart {
    width: 99%;
    height: 80%;
    //background-color: #34EFBD;
  }

  .video-js {
    background-color: rgb(1 5 43);
    object-fit: fill;

    //隐藏video播放按钮
    video::-webkit-media-controls-play-button {
      display: none !important;
    }

    //隐藏video音量进度条
    video::-webkit-media-controls-volume-slider {
      display: none !important;
    }

    //隐藏video音量按钮
    video::-webkit-media-controls-mute-button {
      display: none !important;
    }

    video::-webkit-media-controls-toggle-closed-captions-button {
      display: none !important;
    }

    //隐藏当前时间
    video::-webkit-media-controls-current-time-display {
      display: none !important;
    }

    //隐藏剩余时间
    video::-webkit-media-controls-time-remaining-display {
      display: none !important;
    }

    //隐藏进度条
    video::-webkit-media-controls-timeline {
      display: none !important;
    }

    //更多选项
    video::-internal-media-controls-overflow-button {
      display: none !important;
    }
  }

  video {
    pointer-events: none;
  }
</style>
